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 类twitter的文本字数限制带提示效果插件
Apr 16 Javascript
深入理解JavaScript定时机制
Oct 29 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
May 06 Javascript
jQuery实现的背景动态变化导航菜单效果
Aug 24 Javascript
原生js实现数字字母混合验证码的简单实例
Dec 10 Javascript
JavaScript注入漏洞的原理及防范(详解)
Dec 04 Javascript
AngularJS中的Promise详细介绍及实例代码
Dec 13 Javascript
vue获取当前激活路由的方法
Mar 17 Javascript
微信小程序文章详情页面实现代码
Sep 10 Javascript
如何使用 vue + d3 画一棵树
Dec 03 Javascript
vue全局自定义指令-元素拖拽的实现代码
Apr 14 Javascript
微信小程序基于movable-view实现滑动删除效果
Jan 08 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
解析crontab php自动运行的方法
2013/06/24 PHP
如何使用PHP获取指定日期所在月的开始日期与结束日期
2013/08/01 PHP
PHP单例模式详细介绍
2015/07/01 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
phpinfo的知识点总结
2019/10/10 PHP
Avengerls vs Newbee BO3 第二场2.18
2021/03/10 DOTA
ExtJS下grid的一些属性说明
2009/12/13 Javascript
基于JQuery的日期联动实现代码
2011/02/24 Javascript
基于jQuery的动态表格插件
2011/03/28 Javascript
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
javascript中的缓动效果实现程序
2012/12/29 Javascript
JavaScript 验证码的实例代码(附效果图)
2013/03/22 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
2013/09/06 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
JavaScript对象学习小结
2015/09/02 Javascript
AngularJS API之copy深拷贝详解及实例
2016/09/14 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
2016/10/18 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
2018/09/26 Javascript
原生js实现五子棋游戏
2020/05/28 Javascript
[01:06:39]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第三局
2016/03/02 DOTA
Python3写入文件常用方法实例分析
2015/05/22 Python
在Python的Django框架下使用django-tagging的教程
2015/05/30 Python
python 实现红包随机生成算法的简单实例
2017/01/04 Python
Django 路由控制的实现代码
2018/11/08 Python
新西兰最大的品牌运动鞋购物网站:Platypus NZ
2017/10/27 全球购物
Gucci法国官方网站:意大利奢侈品牌
2018/07/25 全球购物
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
自行车租赁公司创业计划书
2014/01/28 职场文书
庆元旦迎新年广播稿
2014/02/18 职场文书
公司保密承诺书
2014/03/27 职场文书
第二课堂活动总结
2014/05/07 职场文书
刑事起诉书范文
2015/05/19 职场文书
拖欠货款起诉状
2015/05/20 职场文书
为什么说餐饮很难做,是因为你不了解这些新规则
2019/08/20 职场文书
解决IIS7下无法绑定https主机的问题
2022/04/29 Servers