vue制作幻灯片时涉及的transition动画(动图)

幻灯片使用频率很高，就是各个网站的轮播大图。为了使图片更加平滑的过渡，就考虑给幻灯片加上transition动画。先看实现的效果，然后再分析动画原理。

上图可以看出，幻灯片是慢慢的滑出来，而不是一下一下的跳出来。

1.transition动画原理

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡。

1. 条件渲染 (使用 v-if)
2. 条件展示 (使用 v-show)
3. 动态组件
4. 组件根节点

1.原理：

• 1.如果想要给哪个元素添加动画那么必须给当前元素添加一个标签transitionn，transitionn标签只有name属性，name为动画的名称。如下：

  <transition name="">