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 相关文章推荐
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
Mar 09 Javascript
Angularjs基础知识及示例汇总
Jan 22 Javascript
简述JavaScript的正则表达式中test()方法的使用
Jun 16 Javascript
jquery利用拖拽方式在图片上添加热链接
Nov 24 Javascript
基于javascript实现随机颜色变化效果
Jan 14 Javascript
详解VueJs前后端分离跨域问题
May 24 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
jQuery创建及操作xml格式数据示例
May 26 jQuery
vue的style绑定background-image的方式和其他变量数据的区别详解
Sep 03 Javascript
傻瓜式vuex语法糖kiss-vuex整理
Dec 21 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
Sep 04 Javascript
在实例中重学JavaScript事件循环
Dec 03 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代码优化的53个细节
2014/03/03 PHP
非常全面的php日期时间运算汇总
2015/11/04 PHP
Yii2中使用asset压缩js,css文件的方法
2016/11/24 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
2010/06/21 Javascript
JavaScript实现复制功能各浏览器支持情况实测
2013/07/18 Javascript
让新消息在网页标题闪烁提示的jQuery代码
2013/11/04 Javascript
纯JS实现旋转图片3D展示效果
2015/04/12 Javascript
浅谈jQuery的offset()方法及示例分享
2015/07/17 Javascript
jQuery中常用的遍历函数用法实例总结
2015/09/01 Javascript
js实现索引图片切换效果
2015/11/21 Javascript
分享javascript计算时间差的示例代码
2020/03/19 Javascript
js仿手机页面文件下拉刷新效果
2016/10/14 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
2016/11/24 Javascript
简单了解JavaScript中的执行上下文和堆栈
2019/06/24 Javascript
[04:44]DOTA2西游记战队视频彩蛋流出 师徒开黑巧遇林书豪
2016/08/03 DOTA
Python 冒泡,选择,插入排序使用实例
2015/02/05 Python
详解Python的Django框架中的中间件
2015/07/24 Python
python技能之数据导出excel的实例代码
2017/08/11 Python
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
python获取多线程及子线程的返回值
2017/11/15 Python
Python3实现转换Image图片格式
2018/06/21 Python
pytorch使用指定GPU训练的实例
2019/08/19 Python
Python调用百度OCR实现图片文字识别的示例代码
2020/07/17 Python
Python 如何操作 SQLite 数据库
2020/08/17 Python
scrapy-splash简单使用详解
2021/02/21 Python
购买瑞典当代设计的腕表和太阳眼镜:TRIWA
2016/10/30 全球购物
Expedia丹麦:全球领先的旅游网站
2018/03/18 全球购物
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
优秀工会工作者事迹材料
2014/06/02 职场文书
高中学生自我评价范文
2014/09/23 职场文书
个人先进事迹材料
2014/12/29 职场文书
教师党员自我评价范文
2015/03/04 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
信息技术远程培训心得体会
2016/01/09 职场文书
HTML5中 rem适配方案与 viewport 适配问题详解
2021/04/27 HTML / CSS