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 相关文章推荐
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
Mar 06 Javascript
Javascript 定时器调用传递参数的方法
Nov 12 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
Dec 16 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
Mar 28 Javascript
jQuery事件绑定on()与弹窗实现代码
Apr 28 Javascript
解析jQueryEasyUI的使用
Nov 22 Javascript
微信小程序 flex实现导航实例详解
Apr 26 Javascript
JS中移除非数字最多保留一位小数
May 09 Javascript
vue 巧用过渡效果(小结)
Sep 22 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
Mar 29 Javascript
详解vue中axios请求的封装
Apr 08 Javascript
Vue中的transition封装组件的实现方法
Aug 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
swfupload 多文件上传实现代码
2008/08/27 PHP
PHP的自定义模板引擎
2017/03/24 PHP
PHP树形结构tree类用法示例
2019/02/01 PHP
javascript之querySelector和querySelectorAll使用说明
2011/10/09 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
2013/04/08 Javascript
js动态设置鼠标事件示例代码
2013/10/30 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
在JavaScript中构建ArrayList示例代码
2014/09/17 Javascript
详谈javascript中的cookie
2015/06/03 Javascript
Javascript模仿淘宝信用评价实例(附源码)
2015/11/26 Javascript
浅谈jQuery before和insertBefore的区别
2016/12/04 Javascript
bootstrap导航条实现代码
2016/12/28 Javascript
Angular实现表单验证功能
2017/11/13 Javascript
vue-cli3 从搭建到优化的详细步骤
2019/01/20 Javascript
ES6 更易于继承的类语法的使用
2019/02/11 Javascript
关于pip的安装,更新,卸载模块以及使用方法(详解)
2017/05/19 Python
Python正则表达式常用函数总结
2017/06/24 Python
python3中zip()函数使用详解
2018/06/29 Python
利用python脚本如何简化jar操作命令
2019/02/24 Python
python实现简单图片物体标注工具
2019/03/18 Python
PyQt5实现从主窗口打开子窗口的方法
2019/06/19 Python
python进程池实现的多进程文件夹copy器完整示例
2019/11/27 Python
Python列表切片常用操作实例解析
2019/12/16 Python
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
2014/10/10 HTML / CSS
印度最大的旅游网站:MakeMyTrip
2016/10/05 全球购物
英格兰足协官方商店:England Store
2019/07/12 全球购物
奥林匹亚体育:Olympia Sports
2020/12/30 全球购物
信息专业本科生个人的自我评价
2013/10/28 职场文书
科研先进个人典型材料
2014/01/31 职场文书
大学毕业感言200字
2014/03/09 职场文书
2014党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
慰问信格式规范
2015/03/23 职场文书
干部考核工作总结
2015/08/12 职场文书
一个家长教育孩子的心得体会
2016/01/15 职场文书
幼儿园教师心得体会范文
2016/01/21 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书