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 相关文章推荐
JavaScript 无符号右移赋值操作
Apr 17 Javascript
JavaScript读取中文cookie时的乱码问题的解决方法
Oct 14 Javascript
javascript 日期常用的方法
Nov 11 Javascript
JS在IE和FireFox之间常用函数的区别小结
Mar 12 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件
Aug 24 Javascript
事件模型在各浏览器中存在差异
Oct 20 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
Oct 22 Javascript
JS实现全屏的四种写法
Dec 30 Javascript
JavaScript事件委托原理与用法实例分析
Jun 07 Javascript
webpack4.x开发环境配置详解
Aug 04 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
Sep 03 Javascript
JS实现处理时间,年月日,星期的公共方法示例
May 31 Javascript
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
历史证明,懒惰才是推动科学发展技术进步的动力
2021/03/02 无线电
Smarty的配置与高级缓存技术分享
2012/06/05 PHP
PHP实现CSV文件的导入和导出类
2015/03/24 PHP
PHP单文件上传原理及上传函数的封装操作示例
2019/09/02 PHP
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
使用typeof判断function是否存在于上下文
2014/08/14 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
2015/06/08 Javascript
Jquery 垂直多级手风琴菜单附源码下载
2015/11/17 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
2016/03/28 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
ES6正则表达式的一些新功能总结
2017/05/09 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
详解Nodejs get获取远程服务器接口数据
2019/03/26 NodeJs
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
2019/04/10 Javascript
微信小程序学习总结(五)常见问题实例小结
2020/06/04 Javascript
vue中用 async/await 来处理异步操作
2020/07/18 Javascript
Element Breadcrumb 面包屑的使用方法
2020/07/26 Javascript
[00:36]DOTA2勇士令状莱恩声望物品——冥晶之厄展示
2018/05/25 DOTA
Python中关于Sequence切片的下标问题详解
2017/06/15 Python
python生成excel的实例代码
2017/11/08 Python
python3 中文乱码与默认编码格式设定方法
2018/10/31 Python
40个你可能不知道的Python技巧附代码
2020/01/29 Python
Python调用Windows命令打印文件
2020/02/07 Python
Python使用OpenPyXL处理Excel表格
2020/07/02 Python
2020版Python学习路线图(附学习资料)
2020/09/15 Python
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
国贸专业个人求职信分享
2013/12/04 职场文书
大三学习计划书范文
2014/05/02 职场文书
运动会报道稿300字
2014/10/02 职场文书
政府四风问题整改措施
2014/10/04 职场文书
预备党员考察表党小组意见
2015/06/01 职场文书
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python
使用feign服务调用添加Header参数
2021/06/23 Java/Android
MySQL中TIMESTAMP类型返回日期时间数据中带有T的解决
2022/12/24 MySQL