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面向对象编程浅析
Aug 28 Javascript
js的匿名函数使用介绍
Dec 11 Javascript
jquery中trigger()无法触发hover事件的解决方法
May 07 Javascript
jquery实现兼容IE8的异步上传文件
Jun 15 Javascript
AngularJS基础 ng-cloak 指令简单示例
Aug 01 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
简单谈谈CommonsChunkPlugin抽取公共模块
Dec 31 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
Mar 01 Javascript
JS实现获取数组中最大值或最小值功能示例
Mar 02 Javascript
js 递归json树实现根据子id查父id的方法分析
Nov 08 Javascript
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
基于JavaScript实现年月日三级联动
Jun 22 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
音乐朗读剧《MARS RED》2021年TV动画化决定!
2020/03/06 日漫
php+AJAX传送中文会导致乱码的问题的解决方法
2008/09/08 PHP
PHP 如何获取二维数组中某个key的集合
2014/06/03 PHP
一个经典的PHP文件上传类分享
2014/11/18 PHP
用jQuery扩展自写的 UI导航
2010/01/13 Javascript
jQuery 学习入门篇附实例代码
2010/03/16 Javascript
一起来写段JS drag拖动代码
2010/12/09 Javascript
JS子父窗口互相操作取值赋值的方法介绍
2013/05/11 Javascript
JS网页播放声音实现代码兼容各种浏览器
2013/09/22 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
2015/09/14 Javascript
js简单设置与使用cookie的方法
2016/01/22 Javascript
jQuery实现布局高宽自适应的简单实例
2016/05/28 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
对vue下点击事件传参和不传参的区别详解
2018/09/15 Javascript
Vue的状态管理vuex使用方法详解
2020/02/05 Javascript
javascrpt密码强度校验函数详解
2020/03/18 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
2020/11/24 Javascript
Python编程实现的简单神经网络算法示例
2018/01/26 Python
Python3实现定时任务的四种方式
2019/06/03 Python
Python Django框架防御CSRF攻击的方法分析
2019/10/18 Python
详解python安装matplotlib库三种失败情况
2020/07/28 Python
Selenium+BeautifulSoup+json获取Script标签内的json数据
2020/12/07 Python
微软澳洲官方网站:Microsoft Australia
2017/01/10 全球购物
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
编写用C语言实现的求n阶阶乘问题的递归算法
2014/10/21 面试题
JDBC操作数据库的基本流程是什么
2014/10/28 面试题
毕业自我评价
2014/02/05 职场文书
党支部活动策划方案
2014/08/18 职场文书
环境卫生倡议书
2014/08/29 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
2015年党风廉政承诺书
2015/01/22 职场文书
水浒传读书笔记
2015/06/25 职场文书
2016新年问候语大全
2015/11/11 职场文书
Nginx域名转发https访问的实现
2021/03/31 Servers
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS
python实现商品进销存管理系统
2022/05/30 Python