vue实现循环切换动画


Posted in Javascript onOctober 17, 2018

本文实例为大家分享了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 相关文章推荐
jQuery 使用手册(四)
Sep 23 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
Feb 11 Javascript
javascript(js)的小数点乘法除法问题详解
Mar 07 Javascript
Jquery实现的角色左右选择特效
May 21 Javascript
Jquery实现图片预加载与延时加载的方法
Dec 22 Javascript
图解JavaScript中的this关键字
May 28 Javascript
js自定义select下拉框美化特效
May 12 Javascript
纯js的右下角弹窗实例
Mar 12 Javascript
JavaScript数据结构之数组的表示方法示例
Apr 12 Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 Javascript
JavaScript 九种跨域方式实现原理
Feb 11 Javascript
Vue根据条件添加click事件的方式
Nov 09 Javascript
element-ui upload组件多文件上传的示例代码
Oct 17 #Javascript
bootstrap table合并行数据并居中对齐效果
Oct 17 #Javascript
IE9 elementUI文件上传的问题解决
Oct 17 #Javascript
vue src动态加载请求获取图片的方法
Oct 17 #Javascript
node实现分片下载的示例代码
Oct 17 #Javascript
在小程序开发中使用npm的方法
Oct 17 #Javascript
浅谈HTTP 缓存的那些事儿
Oct 17 #Javascript
You might like
php读取mysql中文数据出现乱码的解决方法
2013/08/16 PHP
PHP设计模式之工厂模式实例总结
2017/09/01 PHP
thinkPHP框架实现的简单计算器示例
2018/12/07 PHP
php使用scandir()函数扫描指定目录下所有文件示例
2019/06/08 PHP
JQuery CSS样式控制 学习笔记
2009/07/23 Javascript
jquery.validate使用攻略 第五步 正则验证
2010/07/01 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
2013/03/20 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
node.js中的fs.appendFile方法使用说明
2014/12/17 Javascript
javascript事件委托的用法及其好处简析
2016/04/04 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
2016/04/05 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
2016/12/08 Javascript
canvas知识总结
2017/01/25 Javascript
微信小程序之页面拦截器的示例代码
2017/09/07 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
在vue+element ui框架里实现lodash的debounce防抖
2019/11/13 Javascript
ES6 Symbol在对象中的作用实例分析
2020/06/06 Javascript
javascript实现搜索筛选功能实例代码
2020/11/12 Javascript
python中pandas.DataFrame排除特定行方法示例
2017/03/12 Python
Python爬虫天气预报实例详解(小白入门)
2018/01/24 Python
对python中return与yield的区别详解
2020/03/12 Python
Python OpenCV去除字母后面的杂线操作
2020/07/05 Python
python 对象真假值的实例(哪些视为False)
2020/12/11 Python
Python tkinter之Bind(绑定事件)的使用示例
2021/02/05 Python
生产副总岗位职责
2013/11/28 职场文书
《最大的“书”》教学反思
2014/02/14 职场文书
国家机关领导干部民主生活会对照检查材料思想汇报
2014/09/17 职场文书
教师自我剖析材料范文
2014/09/30 职场文书
办理护照工作证明
2014/10/10 职场文书
个人职业及收入证明
2014/10/13 职场文书
小学教师师德师风承诺书
2015/04/28 职场文书
毕业论文答辩开场白和答辩技巧
2015/05/27 职场文书
2015年党建工作汇报材料
2015/06/25 职场文书
2019送给家人们的中秋节祝福语
2019/08/15 职场文书
导游词之黄果树瀑布
2019/09/20 职场文书
TypeScript 内置高级类型编程示例
2022/09/23 Javascript