使用vue.js如何实现轮播-木庄网络博客

本文摘自PHP中文网，作者藏色散人，侵删。

使用vue.js实现轮播的方法：首先使用“<transition name="targetClassName">”将相应的元素包裹住；然后在“.imgShoudMove”中设置动画属性；最后采用Vue结合Css3来实现轮播图即可。

本教程操作环境：windows7系统、vue2.0&&css3版，Dell G3电脑，该方法适用于所有品牌电脑。

本文章采用Vue结合Css3来实现轮播图。

首先要了解的是Vue的动画原理。在vue中，如果我们要给元素设置动画效果，则需要使用一个<transition name="targetClassName"></transition>将相应的元素包裹住，如下：

<transition name="imgShouldMove"> 
 <img v-if="shouldShow" src="/1.jpg"> 
</transition>

之后，便可以在.imgShoudMove中设置动画属性了，如下:

.imgShouldMove-enter{ 
 transition: all 0.5s; 
} 
.imgShouldMove-enter-active{ 
 transform:translateX(900px); 
}

注意在HTML中，这里<img>有一个v-if="shoudShow"属性。shouldShow这个属性是在data(){}中设置的，当shouldShow从false-->true时（即img从无到突然出现时），

Vue动画原理将动画分为了 shouldShouldMove-enter 和 imgShouldMove-enter-active 两个阶段。

其中 shouldShouldMove-enter 表示动画开始的初始状态， imgShouldMove-enter-active 这表示动画的终止状态。而动画的触发则是通过if-show引起的。

示例：

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者