vue实现循环切换动画

2018-10-17 38 guoxiaxing

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

展开阅读全文

更多Javascript文章

javascript编程起步(第七课)
Feb 27 42
JS判断是否为数字,是否为整数,是否为浮点数的代码
Apr 24 78
jQuery中filter()和find()的区别深入了解
Sep 25 38
jquery实现预览提交的表单代码分享
May 21 40
在IE8上JS实现combobox支持拼音检索功能
May 23 44
老生常谈JavaScript中的this关键字
Oct 01 34
mapboxgl区划标签避让不遮盖实现的代码详解
Jul 01 149
手机访问当前页面