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 相关文章推荐
JS连连看源码完美注释版(推荐)
Dec 09 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
Aug 22 Javascript
JS文件上传神器bootstrap fileinput详解
Jan 28 Javascript
js实现微博发布小功能
Jan 12 Javascript
js实现交通灯效果
Jan 13 Javascript
JavaScript基础之AJAX简单的小demo
Jan 29 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
Nov 01 Javascript
基于vue-element组件实现音乐播放器功能
May 06 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
Sep 02 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
Feb 11 Javascript
vue在响应头response中获取自定义headers操作
Jul 24 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 fsockopen 模拟POST/GET传送数据的方法
2015/09/22 PHP
PHP怎样用正则抓取页面中的网址
2016/08/09 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
Yii框架操作cookie与session的方法实例详解
2019/09/04 PHP
ppk谈JavaScript style属性
2008/10/10 Javascript
JavaScript类和继承 constructor属性
2010/03/04 Javascript
javascript下数值型比较难点说明
2010/06/07 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
JS 操作Array数组的方法及属性实例解析
2014/01/08 Javascript
jQuery实现为控件添加水印文字效果(附源码)
2015/12/02 Javascript
探究Javascript模板引擎mustache.js使用方法
2016/01/26 Javascript
JS作为值的函数用法示例
2016/06/20 Javascript
基于React实现表单数据的添加和删除详解
2017/03/14 Javascript
vue增删改查的简单操作
2017/07/15 Javascript
用p5.js制作烟花特效的示例代码
2018/03/21 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
2019/09/10 Javascript
JavaScript面向对象核心知识与概念归纳整理
2020/05/09 Javascript
vue 防止页面加载时看到花括号的解决操作
2020/11/09 Javascript
python去掉字符串中重复字符的方法
2014/02/27 Python
python多线程抓取天涯帖子内容示例
2014/04/03 Python
Python实现全局变量的两个解决方法
2014/07/03 Python
Linux下用Python脚本监控目录变化代码分享
2015/05/21 Python
pandas Dataframe行列读取的实例
2018/06/08 Python
通过python改变图片特定区域的颜色详解
2019/07/15 Python
python 动态调用函数实例解析
2019/10/21 Python
css3闪亮进度条效果实现思路及代码
2013/04/17 HTML / CSS
美国家庭鞋店:Shoe Sensation
2019/09/27 全球购物
美国家居用品和厨具购物网站:DealsDot
2019/10/07 全球购物
求职者简历中的自我评价
2013/10/20 职场文书
村官学习十八大感想
2014/01/15 职场文书
优秀员工表扬信
2014/01/17 职场文书
《理想》教学反思
2014/02/17 职场文书
土建施工员岗位职责
2014/07/16 职场文书
教师年终个人总结
2015/02/11 职场文书
让人感觉高大上的讲话稿怎么写?
2019/07/08 职场文书
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python