vue实现循环切换动画

2019-11-19 12:41:17

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了vue实现循环切换动画的具体代码，供大家参考，具体内容如下

注意动画的钩子函数的判断逻辑，注意动画编写时类名的顺序！！

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <style>  .box{  width: 200px;  height: 200px;  background-color: red; } .guo-enter-active,.guo-leave-active{  width: 200px;  height: 200px;  opacity: 1;  background-color: red;  transition: 0.7s; } .guo-leave-to{  width: 100px;  height: 100px;  opacity: 0;  background-color: orange; } .guo-enter{  width: 100px;  height: 100px;  opacity: 0;  background-color: orange; } .box2{  margin-top: 100px; } </style> <script src='vue.min.js'></script></head><body> <div id='app'> <div>  <input type="button" value='change' @click='change'>  <transition name='guo' @after-enter='Enter' @after-leave='Leave'>  <div v-show='show' class='box'></div>  </transition>  <transition name='guo' @enter='Enter2' @after-leave='Leave2'>  <div v-show='show2' class='box box2'></div>  </transition> </div> </div> <script> new Vue({  el:'#app',  data:{  show:false,  show2:false  },  methods:{  change(){   this.show = !this.show;  },  Enter(){   this.show2 = true;  },  Leave(){   this.show2=false;  },  Leave2(){   this.show = true;  },  Enter2(){   this.show = false;  }  } }); </script></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：解决百度Echarts图表坐标轴越界的方法

下一篇：Nodejs实现多文件夹文件同步