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使用指南之dom.js
Jan 10 Javascript
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
Mar 27 Javascript
jquery 回车事件实现代码
Aug 23 Javascript
jQuery获取注册信息并提示实现代码
Apr 21 Javascript
使用Jquery实现点击文字后变成文本框且可修改
Sep 21 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
Feb 02 Javascript
浅析javascript中的事件代理
Nov 06 Javascript
JavaScript  event对象整理及详细介绍
Oct 10 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
基于javascript中的typeof和类型判断(详解)
Oct 27 Javascript
vue.js实现图书管理功能
Sep 24 Javascript
VUE实现自身整体组件销毁的示例代码
Jan 13 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
Yii模型操作之criteria查找数据库的方法
2016/07/15 PHP
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
Yii2设置默认控制器的两种方法
2017/05/19 PHP
关于laravel模板中生成URL的几种模式总结
2019/10/18 PHP
基于jquery的自定义鼠标提示效果 jquery.toolTip
2010/11/14 Javascript
Javascript操作URL函数修改版
2013/11/07 Javascript
textarea 控制输入字符字节数(示例代码)
2013/12/27 Javascript
javascript日期处理函数,性能优化批处理
2015/09/06 Javascript
谈一谈javascript闭包
2016/01/28 Javascript
js事件驱动机制 浏览器兼容处理方法
2016/07/23 Javascript
关于JS中的方法是否加括号的问题
2016/07/27 Javascript
jQuery监听文件上传实现进度条效果的方法
2016/10/16 Javascript
AngularJS的Filter的示例详解
2017/03/07 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
详解webpack es6 to es5支持配置
2017/05/04 Javascript
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
解决linux下node.js全局模块找不到的问题
2018/05/15 Javascript
如何使用Javascript中的this关键字
2020/05/28 Javascript
[01:04:05]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python 实现红包随机生成算法的简单实例
2017/01/04 Python
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
python检测空间储存剩余大小和指定文件夹内存占用的实例
2018/06/11 Python
对Pyhon实现静态变量全局变量的方法详解
2019/01/11 Python
Python后台开发Django的教程详解(启动)
2019/04/08 Python
python Pandas如何对数据集随机抽样
2019/07/29 Python
TensorFlow 多元函数的极值实例
2020/02/10 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
C#的几个面试问题
2016/05/22 面试题
教师党性分析材料
2014/02/04 职场文书
优秀食品类广告词
2014/03/19 职场文书
竞聘演讲稿精彩开头和结尾
2014/05/14 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
爱牙日宣传活动总结
2015/02/05 职场文书
幼儿园教师自我评价
2015/03/04 职场文书