前言

这个寒假准备一边做新项目一边把自己的个人博客重构了，关于移动端一直在想到底是做响应式还是单独写一套，后来扒开自己去年写的博客源码，果断选择重做一套...准备一边做一边找一些比较好的动画分享。

动效来源

https://m.adicw.cn/

准备以这个博客为主，从去年到现在我都在寻找一些好的博客界面设计，目前为止依然是这个大佬做的博客的是我心目中的NO.1，我原始的博客很多过渡动画都是参考它的实现，但是也询问过该大佬博客并不开源，不过F12之后一些动画效果就显而易见了，这次准备边做边总结。

移动端页面反转切换动画

上demo效果图（想看实际效果可以直接访问上面的移动端博客）：

分析

整个页面布局分为tabbar和内容区，其tabbar控制路由跳转，核心在于如何借助Vue的transition组件实现路由切换的过渡。去年第一次看到这个效果的时候只能说眼前一黑，虽然translate属性都认识，但就是不知道咋实现出来的，那时候css的水平还比较差，经过一年的沉淀还是可以的。

对于路由页面切换的动画一定要观察其进入、离开的转换效果，不要把它当作一个整体，因为再华丽花哨的东西transition组件的使用依然是遵循着这样的规则

离开变化：1. 原始 -> 缩小 2. 反转 0度 -> 180度，rotateY 3. 透明度 1-> 0

进入变化：1. 缩小-> 原始 2.反转180度 -> 0度 rotateY 3.透明度 0 -> 1

注意大小变化和反转变化是分开的，因此需要使用keyframes实现，同时需要设置绝对定位，这就不做过多解释了，详情可以看vue官方文档的transition上的使用，细节的border变化则是放在过渡的过程当中。

代码

template模板，（keep-alive看自己的需求）：

css部分（scss）中间动画帧百分比可以按照自己实际动画需求设置：