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 相关文章推荐
Prototype Function对象 学习
Jul 12 Javascript
js 幻灯片的实现
Dec 06 Javascript
使用jquery实现图文切换效果另加特效
Jan 20 Javascript
JS函数this的用法实例分析
Feb 05 Javascript
jquery判断至少有一个checkbox被选中的方法
Jun 05 Javascript
javascript中数组方法汇总
Jul 07 Javascript
js 实现数值的千分位及保存小数方法(推荐)
Aug 01 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
Aug 02 Javascript
JSON 数据详解及实例代码分析
Jan 20 Javascript
使用jquery给新生的th绑定hover事件的实例
Feb 10 Javascript
详解微信小程序之提高应用速度小技巧
Jan 07 Javascript
教你部署vue项目到docker
Apr 05 Vue.js
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的cms
2010/12/19 PHP
用PHP的超级变量$_GET获取HTML表单(Form) 数据
2011/05/07 PHP
浅谈PHP解析URL函数parse_url和parse_str
2014/11/11 PHP
基于ThinkPHP实现批量删除
2015/12/18 PHP
php实现博客,论坛图片防盗链的方法
2016/10/15 PHP
PHP/ThinkPHP实现批量打包下载文件的方法示例
2017/07/31 PHP
php 实现简单的登录功能示例【基于thinkPHP框架】
2019/12/02 PHP
用jscript启动sqlserver
2007/06/21 Javascript
兼容ie和firefox js关闭代码
2008/12/11 Javascript
学习javascript,实现插入排序实现代码
2011/07/31 Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
2012/01/15 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
2012/12/10 Javascript
jquery 列表双向选择器之改进版
2013/08/09 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
2016/06/13 Javascript
Bootstrap整体框架之CSS12栅格系统
2016/12/15 Javascript
angular中的http拦截器Interceptors的实现
2017/02/21 Javascript
vue深入解析之render function code详解
2017/07/18 Javascript
vue2实现可复用的轮播图carousel组件详解
2017/11/27 Javascript
Vue不能观察到数组length的变化
2018/06/08 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
Python写的英文字符大小写转换代码示例
2015/03/06 Python
浅谈Python批处理文件夹中的txt文件
2019/03/11 Python
python如何调用php文件中的函数详解
2020/12/29 Python
南威尔士家居商店:Leekes
2016/10/25 全球购物
Boston Proper官网:美国女装品牌
2017/10/30 全球购物
铭立家具面试题
2012/12/06 面试题
教师节商场活动方案
2014/02/13 职场文书
教师业务学习材料
2014/12/16 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书