Vue中添加过渡效果的方法


Posted in Javascript onMarch 16, 2017

关于vue的过渡效果,vue官方给的概述是这样的。

Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。

包括以下工具:

1、在 CSS 过渡和动画中自动应用 class

2、可以配合使用第三方 CSS 动画库,如 Animate.css

3、在过渡钩子函数中使用 JavaScript 直接操作 DOM

4、可以配合使用第三方 JavaScript 动画库,如 Velocity.js

其中里面也给出了许多的例子,但是例子给到了“多个元素过渡”的时候,就没有案例的代码了,在这里对vue官方文档的这部分案例做一部分补充。

以下我的代码

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <script src="../js/vue.js" charset="utf-8"></script>
 <title>过渡效果-多个元素的过渡</title>
 <style>
  /*淡入淡出按钮,这个使得按钮的效果很差*/
  /*在 “on” 按钮和 “off” 按钮的过渡中,两个按钮都被重绘了,一个离开过渡的时候另一个开始进入过渡。这是 <transition> 的默认行为 - 进入和离开同时发生。*/
  .fade-enter-active,.fade-leave-active{
   transition: all .5s
  }
  .fade-enter,.fade-leave-active{
   opacity: 0
  }
  /*淡入淡出+绝对定位*/
  #app2{
   position: relative;
   height: 100px;
   width: 100px;
   background:green;
  }
  #app2 button{
   position: absolute;
   left:50%;
   top: 50%;
  }
  .fade-abosolute-enter,.fade-abosolute-leave-active{
   opacity: 0
  }
  .fade-abosolute-enter-active,.fade-abosolute-leave-active{
   transition: all 1s
  }
  /*淡入淡出+绝对定位+滑动效果*/
  /*这三种效果合在一起,产生的效果是比较好的*/
  #app3{
   width: 200px;
   height: 100px;
   background: rgb(26, 46, 224);
   position: relative;
  }
  #app3 button{
   position: absolute;
   left: 50%;
   top: 50%;
  }
  .fade-slide-enter-active,.fade-slide-leave-active{
   transition: all 1s
  }
  .fade-slide-enter{
   opacity: 0;
   transform: translateX(30px);
  }
  .fade-slide-leave-active{
   opacity: 0;
   transform: translateX(-30px);
  }
  #app4{
   position: relative;
   width: 200px;
   height: 100px;
   background: rgb(8, 201, 80);
  }
  #app4 button{
   position: absolute;
   left: 50%;
   top: 50%;
  }
  .fade-slide-mode-enter-active,.fade-slide-mode-leave-active{
   transition: all .5s
  }
  .fade-slide-mode-enter{
   opacity: 0;
   transform: translateX(30px);
  }
  .fade-slide-mode-leave-active{
   opacity: 0;
   transform: translateX(-30px);
  }
 </style>
</head>
<body>
  <!--  淡入淡出按钮,这个使得按钮的效果很差 -->
 <div id="app1">
  <!-- 这个淡出淡出效果,在原本没加上过渡模式的时候效果非常糟糕,在加入了mode="out-in"之后,效果比较好,out-in指的是先过渡现有的元素,在过渡新元素 -->
  <transition name="fade" mode="out-in">
    <button v-if="isEditing" key="save" @click="isEditing = !isEditing">
     save
    </button>
    <button v-else key="edit" @click="isEditing = !isEditing">
     Edit
    </button>
  </transition>
 </div>
 <!-- 淡入淡出+绝对定位 -->
 <div id="app2">
  <transition name="fade-abosolute">
   <button v-if="on" key="on" @click="on = !on">
    on
   </button>
   <button v-else key="off" @click="on = !on">
    off
   </button>
  </transition>
 </div>
 <!-- 淡入淡出+绝对定位+滑动 -->
 <div id="app3">
  <transition name="fade-slide">
   <button v-if="on" key="on" @click="on = !on">
    on
   </button>
   <button v-else key="off" @click="on = !on">
    off
   </button>
  </transition>
 </div>
 <!-- in-out,out-in的过渡模式,同时生效的进入和离开的过渡不能满足所有要求,所以vue提供了过渡模式 -->
 <div id="app4">
  <transition name="fade-slide-mode" mode="in-out">
   <button v-if="on" key="on" @click="on = !on">
    on
   </button>
   <button v-else key="off" @click="on = !on">
    off
   </button>
  </transition>
 </div>
</body>
<script type="text/javascript">
 var vm1 = new Vue({
  el:'#app1',
  data () {
   return{
    isEditing:true,
   }
  }
 })
 var vm2 = new Vue({
  el:'#app2',
  data () {
   return {
    on:true
   }
  }
 })
 var vm3 = new Vue({
  el:'#app3',
  data () {
   return {
    on:true
   }
  }
 })
 var vm4 = new Vue({
  el:'#app4',
  data () {
   return {
    on:true
   }
  }
 })
</script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS取文本框中最小值的简单实例
Nov 29 Javascript
JavaScript闭包实例讲解
Apr 22 Javascript
jquery实现textarea 高度自适应
Mar 11 Javascript
jquery插件ajaxupload实现文件上传操作
Dec 09 Javascript
JS HTML5拖拽上传图片预览
Jul 18 Javascript
深入浅析JavaScript中的3DES
Aug 24 Javascript
backbone简介_动力节点Java学院整理
Jul 14 Javascript
推荐15个最好用的JavaScript代码压缩工具
Feb 13 Javascript
详解使用React制作一个模态框
Mar 14 Javascript
ionic3双击返回退出应用的方法
Sep 17 Javascript
JS数组属性去重并校验重复数据
Jan 10 Javascript
vue-element-admin项目导入和导出的实现
May 21 Vue.js
JavaScript实现简单精致的图片左右无缝滚动效果
Mar 16 #Javascript
js实现瀑布流效果(自动生成新的内容)
Mar 16 #Javascript
es6的数字处理的方法(5个)
Mar 16 #Javascript
Webpack打包慢问题的完美解决方法
Mar 16 #Javascript
div中文字内容溢出常见的解决方法
Mar 16 #Javascript
JavaScript实现类似淘宝的购物车效果
Mar 16 #Javascript
原生js更改css样式的两种方式
Mar 15 #Javascript
You might like
php自定义函数之递归删除文件及目录
2010/08/08 PHP
PHP手机号码归属地查询代码(API接口/mysql)
2012/09/04 PHP
php像数组一样存取和修改字符串字符
2014/03/21 PHP
PHP中IP地址与整型数字互相转换详解
2014/08/20 PHP
php curl中gzip的压缩性能测试实例分析
2016/11/08 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
jquery validator 插件增加日期比较方法
2010/02/21 Javascript
基于jquery的横向滚动条(滑动条)
2011/02/24 Javascript
fmt:formatDate的输出格式详解
2014/01/09 Javascript
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
基于jQuery实现的文字按钮表单特效整理
2014/12/07 Javascript
AngularJS的表单使用详解
2015/06/17 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
2016/06/24 Javascript
Vue单文件组件基础模板小结
2017/08/10 Javascript
webpack中的热刷新与热加载的区别
2018/04/09 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
JavaScript时间日期操作实例小结【5个示例】
2018/12/22 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
2019/05/13 Javascript
JavaScript Array对象使用方法解析
2019/09/24 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
2019/11/25 Javascript
python生成每日报表数据(Excel)并邮件发送的实例
2019/02/03 Python
PyTorch中Tensor的数据类型和运算的使用
2020/09/03 Python
python try...finally...的实现方法
2020/11/25 Python
有原因的手表:Flex Watches
2019/03/23 全球购物
Bata印度官网:源自欧洲舒适鞋履品牌
2020/01/30 全球购物
日本最大的购物网站:日本乐天市场(Rakuten Ichiba)
2020/11/04 全球购物
计算机操作自荐信
2013/12/07 职场文书
初中化学教学反思
2014/01/23 职场文书
创业大赛策划书
2014/03/01 职场文书
乡镇爱国卫生月活动总结
2014/06/25 职场文书
解除劳动关系协议书范文
2014/09/11 职场文书
作弊检讨书
2015/01/27 职场文书
护士节慰问信
2015/02/15 职场文书
导游词之江南周庄
2019/12/06 职场文书
Python批量将csv文件转化成xml文件的实例
2021/05/10 Python
Python字典的基础操作
2021/11/01 Python