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 相关文章推荐
onpropertypchange
Jul 01 Javascript
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Feb 09 Javascript
可插入图片的TEXT文本框
Dec 27 Javascript
document.execCommand()的用法小结
Jan 08 Javascript
浅析JavaScript基本类型与引用类型
May 28 Javascript
angularJS 中input示例分享
Feb 09 Javascript
javascript中Date()函数在各浏览器中的显示效果
Jun 18 Javascript
bootstrap-treeview自定义双击事件实现方法
Jan 09 Javascript
JS获取和修改元素样式的实例代码
Aug 06 Javascript
JQuery实现定时刷新功能代码
May 09 jQuery
vue.js系列中的vue-fontawesome使用
Feb 10 Javascript
微信提示 在浏览器打开 效果实现过程解析
Sep 10 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中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
简单谈谈 php 文件锁
2017/02/19 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
laravel实现简单用户权限的示例代码
2019/05/28 PHP
laravel执行php artisan migrate报错的解决方法
2019/10/09 PHP
Laravel 简单实现Ajax滚动加载示例
2019/10/22 PHP
php输出形式实例整理
2020/05/05 PHP
PHP后门隐藏的一些技巧总结
2020/11/04 PHP
jQuery 拖动层(在可视区域范围内)
2012/05/24 Javascript
js正文内容高亮效果的实现方法
2013/06/30 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
设置点击文本框或图片弹出日历控件的实现代码
2016/05/12 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
Bootstrap笔记—折叠实例代码
2017/03/13 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
2017/08/28 Javascript
新手vue构建单页面应用实例代码
2017/09/18 Javascript
mocha的时序规则讲解
2019/02/16 Javascript
python实现simhash算法实例
2014/04/25 Python
Python实现的简单文件传输服务器和客户端
2015/04/08 Python
Python对数据库操作
2016/03/28 Python
谈谈如何手动释放Python的内存
2016/12/17 Python
PyTorch搭建多项式回归模型(三)
2019/05/22 Python
python实现拼图小游戏
2020/02/22 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
Melijoe时尚童装德国官网:Melijoe德国
2016/09/03 全球购物
全球速卖通俄罗斯站:AliExpress俄罗斯
2019/06/17 全球购物
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
sort命令的作用和用法
2012/11/04 面试题
体育比赛口号
2014/06/09 职场文书
航班延误投诉信
2015/07/02 职场文书
校运会加油稿大全
2015/07/22 职场文书
2016年小学教师师德承诺书
2016/03/25 职场文书
Python jiaba库的使用详解
2021/11/23 Python
Java 异步任务计算FutureTask
2022/04/28 Java/Android
Docker部署Mysql8的实现步骤
2022/07/07 Servers