vue2 过渡 轮播图

时间:2022-10-24 16:44:32

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

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好用的,官网的例子可以说明。