vue2 过渡 轮播图

---恢复内容开始---

Vue主要渲染条件：

　　v-if：是将元素删除再创造出来进行渲染。

　　v-show：是将元素的display=none掉，再进行渲染；

　　要点知识：v-key：唯一元素标识，若不设置v-key，相同的名字的标签不会被从新渲染，只会瞬间改变内容。这个非常有用，轮播图就靠它了。

　　　　　　　只有满足将dom元素删除（v-if类似）或者display：none（v-show类似）掉，才会渲染。只改变位置，或者颜色等其他，是不会被渲染的，但这种情况，直接使用普通方法就好了，没必要用vue的过渡模式。

两个标签：

　　transition标签：将需要过渡的元素放在里面，就能进行过渡，但里面过渡的标签实际只有一个，按条件显示到底是哪一个标签。

　　transition-group:里面可以放很多元素，v-for出来的元素必须放里面。里面可以设置个tag=‘p’，当显示在浏览器中时，就变成p标签。里面的元素必须设置v-key。

两种方式：

　　javascript钩子：在javascript中设置过度阶段属性。

　　css方式：在css中设置过度阶段属性。

四个阶段：

　　1、enter：元素开始渲染的状态，还没有渲染。

　　2、enter-to（active）：这两个区别搞不明白，这个不行就换另一个。就是目标状态，从enter 到enter-to的状态，transition：all 3s就写在这个状态下。

　　3、leave：开始删除或者隐藏元素，开始前的位置或者状态。

　　4、leave-to（active）：到达这个状态时元素被删除或者隐藏。是过度状态。跟2相同。

无缝轮播图类型：这儿做一张图可见、有圆点，点击可选择图片、左右点击可切换，一共7张图，清理bug。

思路：

　　首先要明白渲染条件：见vue的渲染条件。

　　主要思路：轮播图中，它显示的那张图片在浏览器中可以看到有dom元素。隐藏的是没有dom元素的。所以如果显示一张图片，实际上，轮播列表中只有一个元素是存在的，其他的都被删掉了。按照这个思路，就很简单了。想要轮播，设置：enter：右边→enter-to：正常位置，并且过渡完成→leave：正常位置→leave-to：左边，并且过渡完成。

　　

　　需了解：当它开始渲染新的一张的时候，旧的那一张会与新的一张同时存在，这就有2个元素。当旧的那一张过渡时间完成后，就会被删除。

　　代码如下：

html：

<div>

　　<button @click='next'>下一张</button>

　　<button @click='last'>上一张</button>

　　<ul class='ul'>

　　　　<li>

　　　　　　<transition :name='tr'>  　<!--必须设置name,放入其中的元素能够过度--> 

　　　　　　　　<img :src='src' :key='src'> <!--当src改变了，这张图就消失了，满足类似v-if的渲染条件。必须设置key值，因为都是img元素，不设置会只改变图片，不进行切换--> 

　　　　　　</transition>

　　　　</li>

　　</ul>

　　<ul class='ul2'>  <!--这儿放7个圆点，并且绑定click，--> 

　　　　<li v-for='num in 7' :style="{color:num==n?'red':'green'}" @click='change(num)' class='li' >●</li>

　　</ul>     　　<!--当num==n（当前显示元素的索引）的时候，圆点变为红色，其他为绿色--> 

 

</div>

javascript:

data(){　　　　//如果是普通页，需该为data：{}

　　return{

　　　　n:1,　　　　　　　　　//图片的index。

　　　　tr:'tr1',　　　　　　//trnsition 标签的name值，我写了2套css方案，因为你点下一张，它往左运动，点上一张它往右运动。

　　　　timeout1:'',　　　　//这是flag定时器的数据

　　　　timeout2:'',　　　　//这是自动播放（next（））定时器的数据

　　　　timeout3:'',　　　　//这是打开浏览器时，初始运动定时器的数据

　　　　flag:true,

　　}

},

methods:{

　　next(){　　　　　　　　　　　　　　　　　　//下一张

　　　　if(this.flag){　　　　　　　　　　　　//为了避免连续点击。让flag运动结束后再变为true。

　　　　　　this.flag=false;　　

　　　　　　this.clearT();　　　　　　　　　　//运动之前，清除所有定时器。

　　　　　　this.n=this.n+1==8?1:this.n+1;　//下一张，如果是第8张，就返回第一张。

　　　　　　this.tr='tr1';　　　　　　　　　　//css方案切换到tr1，就是transition的name属性变为tr1。

　　　　　　this.timeout()　　　　　　　　　　//调用timeout函数，其作用是等待下一次轮播，调整flag，以便可以点击切换。

　　　　}

　　},

　　last(){　　　　　　　　　　　　　　　　　　　//上一张，跟next方向相反

　　　　if(this.flag){

　　　　　　this.flag=false;

　　　　　　this.clearT();

　　　　　　this.n=this.n-1==0?7:this.n-1;　//当它变为第1张时，下一张就是第7张。

　　　　　　this.tr='tr2';　　　　　　　　　　//切换css方案2

　　　　　　this.timeout()                 

　　　　}

　　},

　　clearT(){　　　　　　　　　　　　　　　　　　//清除所有定时器。

　　　　clearTimeout(this.timeout1);　　　　　

　　　　clearTimeout(this.timeout2);

　　　　clearTimeout(this.timeout3);

　　},

　　timeout(){　　　　　　　　　　　　　　　　//运动结束后设置flag为true，并且过3秒调用next，进行下一次运动。

　　　　this.timeout2=setTimeout(()=>{this.flag=true},1050); //运动时间是1s。

　　　　this.timeout1=setTimeout(()=>{this.next()},3000);

　　},

　　change(num){　　　　　　　　　　　　　　//点击小黑点，切换到那一张，需要将这一个圆点的num传下来。

　　　　if(this.flag){

　　　　　　this.flag=false;

　　　　　　this.clearT();　　　　

　　　　　　this.tr = num-this.n>0?'tr1':'tr2';　　//看选择css1方案还是css2方案。

　　　　　　this.n=num;　　　　　　　　　　　　　　　　//将显示那一张变为选中的那一张。　　　　　　

　　　　　　this.timeout()　　　　　　　　　　　　　　

　　　　}

　　},

},

computed:{

　　src(){　　　　　　　　　　　　　　　　　　　　　　//地址，这儿取巧了，this.n与图片编号对应。

　　　　return './src/assets/'+this.n+'.jpg'

　　},

},

mounted(){

　　this.timeout3=setTimeout(this.next,3000);　　//刚挂载dom，就开始等待进行第一次轮播，

　　}

}

//css

//杂项布局 可忽略

*{

　　margin:0;

　　padding:0;

}

li{

　　list-style:none;

　　position:relative;//设置为相对位置。

}

img{

　　width:500px;

　　height:250px;

　　margin:0 auto;

　　display:inline-block;

　　position:absolute; //设置绝对定位

}

.ul{

　　width:500px;

　　height:250px;

　　margin:0 auto;

　　overflow:hidden;

}

.ul2{

　　width: 200px;

　　position:relative;

　　left:50%;

　　margin-left:-100px;

　　top:-30px;

　　text-align:center;

}

li.li{

　　font-size:25px;

　　float:left;

　　cursor:pointer;

　　transition:all 1s;　　　　　　//我在这儿设置普通过度，这儿是红色与绿色转变。

}

 

 

//方案一 让图片从右往左运动。

.tr1-enter{

　　opacity:0;

　　left:100%;  //从左边开始进入。

}

.tr1-enter-to{

　　left:0;　　　　　　　　//过度到正常位置，必须写，position定位不写，会是默认位置，可能不是left:0这儿。

　　transition:all 1s;//过度一秒

　　opacity:1;

}

.tr1-leave{　　　　　　　　//离开动画

　　left:0;

　　opacity:1;

}

.tr1-leave-to{

　　transition:all 1s;

　　opacity:0;

　　left:-100%　　　　　　//正常位置过度到左边，然后消失。

}

 

//方案二：与方案一方向是反的，其他全部相同。

.tr2-enter{

　　opacity:0;

　　left:-100%;

}

.tr2-enter-to{

　　left:0;

　　transition:all 1s;

　　opacity:1;

}

.tr2-leave{

　　left:0;

　　opacity:1;

}

.tr2-leave-to{

　　transition:all 1s;

　　opacity:0;

　　left:100%

}

遗留问题：

　　当使用transitionend事件代替定时器触发图片运动后执行代码时，发现并不理想，有时候运动结束后并不能触发@transitionend事件，猜测是过渡时出现了2个img元素，transitionend会分别探测2个元素动画结束，如果有2中style过度，就是应该一次动画触发4次transitionend，但触发次数并不是稳定在4次，非常奇怪。

　　还有种方式就是不用position，使用transform，但是很遗憾，ie貌似并不支持。

　　v-enter-to与v-enter-active区别不明。如果enter-to是代替enter-active的，那在transition-group中，enter-to是不比enter-active好用的，官网的例子可以说明。