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 相关文章推荐
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
Oct 29 Javascript
jQuery $.data()方法使用注意细节
Dec 31 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
Aug 29 Javascript
手机号码,密码正则验证
Sep 04 Javascript
javascript实现复制与粘贴操作实例
Oct 16 Javascript
javascript实现日期格式转换
Dec 16 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
Jan 09 Javascript
JavaScript实现仿网易通行证表单验证
May 25 Javascript
jQueryUI DatePicker 添加时分秒
Jun 04 Javascript
5种JavaScript脚本加载的方式
Jan 16 Javascript
原生JS实现的简单轮播图功能【适合新手】
Aug 17 Javascript
详解利用eventemitter2实现Vue组件通信
Nov 04 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
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
PHP实现MVC开发得最简单的方法――模型
2007/04/10 PHP
destoon实现公司新闻详细页添加评论功能的方法
2014/07/15 PHP
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
2009/05/25 Javascript
JavaScript 基础篇(一)
2012/03/30 Javascript
JS去除右边逗号的简单方法
2013/07/03 Javascript
javascript实现的HashMap类代码
2014/06/27 Javascript
jQuery横向擦除焦点图特效代码分享
2015/09/06 Javascript
jQuery链式调用与show知识浅析
2016/05/11 Javascript
原生js实现淘宝购物车功能
2020/06/23 Javascript
ng2学习笔记之bootstrap中的component使用教程
2017/03/09 Javascript
前端页面文件拖拽上传模块js代码示例
2017/05/19 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
2018/05/31 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
2018/07/19 Javascript
javascript中一些奇葩的日期换算方法总结
2018/11/14 Javascript
Node.js中package.json中库的版本号(~和^)
2019/04/02 Javascript
koa-passport实现本地验证的方法示例
2020/02/20 Javascript
JavaScript实现瀑布流布局的3种方式
2020/12/27 Javascript
动感网页相册 python编写简单文件夹内图片浏览工具
2016/08/17 Python
基于python中的TCP及UDP(详解)
2017/11/06 Python
shell命令行,一键创建 python 模板文件脚本方法
2018/03/20 Python
python3基于OpenCV实现证件照背景替换
2018/07/18 Python
Python 确定多项式拟合/回归的阶数实例
2018/12/29 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
Pytorch训练过程出现nan的解决方式
2020/01/02 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
python中not、and和or的优先级与详细用法介绍
2020/11/03 Python
Vince官网:全球著名设计师品牌,休闲而优雅的服饰
2017/01/15 全球购物
1688平价精选商城:阿里集团旗下,工厂出厂价格直销
2017/04/24 全球购物
微软美国官方网站:Microsoft美国
2018/05/10 全球购物
CHARLES & KEITH加拿大官网:新加坡时尚品牌
2020/03/26 全球购物
纬创Java面试题笔试题
2014/10/02 面试题
Java基础知识面试要点
2016/07/29 面试题
公司会议开幕词
2015/01/29 职场文书
python 标准库原理与用法详解之os.path篇
2021/10/24 Python
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android