幻灯片使用频率很高,就是各个网站的轮播大图。为了使图片更加平滑的过渡,就考虑给幻灯片加上transition动画。先看实现的效果,然后再分析动画原理。
上图可以看出,幻灯片是慢慢的滑出来,而不是一下一下的跳出来。
1.transition动画原理
Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡。
- 条件渲染 (使用 v-if)
- 条件展示 (使用 v-show)
- 动态组件
- 组件根节点
1.原理:
-
1.如果想要给哪个元素添加动画那么必须给当前元素添加一个标签transitionn,transitionn标签只有name属性,name为动画的名称。如下:
<transition name=""