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 相关文章推荐
jquery让返回的内容显示在特定div里(代码少而精悍)
Jun 23 Javascript
nw.js实现类似微信的聊天软件
Mar 16 Javascript
jQuery实现的支持IE的html滑动条
Mar 16 Javascript
JScript中的条件注释详解
Apr 24 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
Oct 21 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
Mar 22 Javascript
实现单层json按照key字母顺序排序的示例
Dec 06 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
Jan 03 Javascript
小程序获取周围IBeacon设备的方法
Oct 31 Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 Javascript
解决vue scoped scss 无效的问题
Sep 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
php实现将字符串按照指定距离进行分割的方法
2015/03/14 PHP
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
laravel 解决后端无法获取到前端Post过来的值问题
2019/10/22 PHP
jQuery MD5加密实现代码
2010/03/15 Javascript
javascript对象之内置对象Math使用方法
2010/04/16 Javascript
Node.js中require的工作原理浅析
2014/06/24 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
js+cookies实现悬浮购物车的方法
2015/05/25 Javascript
jquery操作angularjs对象
2015/06/26 Javascript
浅析Javascript ES6新增值比较函数Object.is
2016/08/24 Javascript
微信小程序实现表单校验功能
2020/03/30 Javascript
jquery实现回车键触发事件(实例讲解)
2017/11/21 jQuery
小程序中英文混合排序问题解决
2019/08/02 Javascript
vue 动态添加class,三个以上的条件做判断方式
2020/11/02 Javascript
[01:11:32]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python中类型关系和继承关系实例详解
2015/05/25 Python
浅谈python新手中常见的疑惑及解答
2016/06/14 Python
Python实现Mysql数据库连接池实例详解
2017/04/11 Python
Python 多进程并发操作中进程池Pool的实例
2017/11/01 Python
python变量的存储原理详解
2019/07/10 Python
python中return不返回值的问题解析
2020/07/22 Python
python openCV实现摄像头获取人脸图片
2020/08/20 Python
Selenium执行完毕未关闭chromedriver/geckodriver进程的解决办法(java版+python版)
2020/12/07 Python
水果花束:Fruit Bouquets
2017/12/20 全球购物
WiFi云数码相框:Nixplay
2018/07/05 全球购物
英国领先的在线礼品店:Getting Personal
2019/09/24 全球购物
副护士长竞聘演讲稿
2014/04/30 职场文书
北京故宫的导游词
2015/01/31 职场文书
安全承诺书格式范本
2015/04/28 职场文书
2016公司中秋节寄语
2015/12/07 职场文书
九年级英语教学反思
2016/02/15 职场文书
聊聊golang中多个defer的执行顺序
2021/05/08 Golang
Python Django搭建文件下载服务器的实现
2021/05/10 Python
小程序wx.getUserProfile接口的具体使用
2021/06/02 Javascript
浅谈自定义校验注解ConstraintValidator
2021/06/30 Java/Android