vue 中有一个transition 系统组件可以实现动画,也可以实现页面间的切换。

<transition>内容的改变(样式改变,显示,移除)会以动画的形式展现</transition>  如果transition内是 router-view 则可以实现页面切换动画。

transition 动画的实现原理是 在不同的阶段为 transition内的元素添加不同的类,来达到效果。

 在进入/离开的过渡中,会有 6 个 class 切换。

  1. v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧(requestAnimatFrame()内执行)移除。
  2. v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。
  3. v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。
  4. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧(requestAnimatFrame()内执行)被移除。
  5. v-leave-active:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。
  6. v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除),在过渡/动画完成之后移除。

总结来说:插入动画就是       enter 移除后 到加上 enter-to样式的变化(样式的书写顺序会导致不一样的效果) ,然后元素最终秒回到移除enter,enter-acitve,enter-to 后的样式

最佳实现是enter 上写初始状态,enter-to上写要变化的状态,enter-active上写过渡曲线

移除动画:leave,leave-active加上后样式的变化,或者说由leave 到leave-to 样式的变化,注意一点是如果 leave-to与未进入过渡状态的样式一样,过渡只会持续一个 requestAnimatFrame的时间。

最佳实践是:leave与当前样式相同,leave-to表示要过渡的样式,leave-active上写过渡效果。

注意:一旦一个元素上定义了transition,如果同时定义了其他样式,这个过渡效果会立即生效。

         如果一样式 发生变化,然后马上又变回来,过渡会立马再样式变回来的时候结束。

 

vue中两个组件间切换,如果不设置key,很可能只会改内容不会改标签,两个元素间动画切换使用 out-in比较合适

 

当只用 JavaScript 过渡的时候, 在 enter 和 leave 中,回调函数 done 是必须的 。否则,它们会被同步调用,过渡会立即完成。这个done 其实就是vue设置的过渡完成的回调,比如移除掉dom解冻。

推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false",Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

列表过渡:

transition-group 列表元素位置移动时会添加一个 v-move 的类,使用FLIP的动画原理,然列表平滑的过渡,但是当指定了name后,列表元素移除无法平滑过渡,需要将:name-leave-active设置为absolute,(没明白是什么原因),不指定name时,列表元素添加和删除,位置发生改变的元素都会被添加上v-move.

 

动态组件过渡的最佳实践是将过渡效果封装成组件,通过 prop 传递效果