详解Vue中过度动画效果应用


Posted in Javascript onMay 25, 2017

一、实现动画过渡效果的几种方式

实现动画必须要将要进行动画的元素利用<transition>标签进行包裹

1、利用CSS样式实现过渡效果

<transition name="fade"></transition>

1.v-enter: 定义进入过渡的开始状态。在元素被插入时生效,在下一个帧移除。

2.v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效,在 transition/animation 完成之后移除。

3.v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效,在下一个帧移除。

4.v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效,在 transition/animation 完成之后

详解Vue中过度动画效果应用

通过name的名称进行重命名,在样式文件中进行.fade-enter-active设置动画的效果即transition属性,需要注意的是动画结束后样式将会移除,所以如果想要动画实现之后元素保持有某个样式,则需要transition标签里面的元素的样式表中进行设置,此情况是针对元需要通过改变元素的属性来显示元素,如定位top,left以及通过transform将显示的元素的位置改变从而让元素出现在当前的视图窗口中时,但是如果元素v-show为true之后元素已经在视图中央显示了,不需要位置的移动将元素移动到视图中,只是想要显示的时候显示有动画效果的,则直接将动画结束的属性设置在v-enter-active/v-leave-active中即可。也就是说动画的属性如果只是产生效果,不对元素的任何属性进行修改,也就是动画中的属性样式不需要永久添加到dom元素中,则直接按后者的方式定义,如果说动画的属性同时相对元素进行样式设计,属性样式需要被添加到dom元素上,则需要按照前者的方式。

<transition name="fold">
    <div class="shopcart-list" v-show="listShow">
     <div class="list-header">
      <h1 class="title">购物车</h1>
      <span class="empty" @click="empty">清空</span>
     </div>
     <div class="list-content" ref="list">
      <ul>
       <li class="food border-1px" v-for="(food,index) in selectFoods" v-show="food.count>0">
        <span class="name">{{selectName[index]}}</span>
        <div class="price">
         <span>¥{{food.price*food.count}}</span>
        </div>
        <div class="cartcontrol-wrapper">
         <v-cartcontrol :food="food"></v-cartcontrol>
        </div>
       </li>
      </ul>
     </div>
    </div>
   </transition>
.fold-enter-active,.fold-leave-active
   transition:all 0.5s
  .fold-enter,.fold-leave
   transform :translate3d(0,0,0)
  .shopcart-list
   position:absolute
   transform:translate3d(0,-100%,0)//动画结束后的效果需要在此处进行设置,设置在.fold-enter-active中,元素动画结束后该样式属性会被移除掉,将会看不到想要的效果
   top: 100%//元素即使显示也不再视图窗口中,通过transform实现显示
   z-index:-1
   width:100%

2、利用animation或者是动画库实现动画效果

<div id="example-2">
 <button @click="show = !show">Toggle show</button>
 <transition name="bounce">
  <p v-if="show">Look at me!</p>
 </transition>
</div>
new Vue({
 el: '#example-2',
 data: {
  show: true
 }
})
.bounce-enter-active {
 animation: bounce-in 0.5s linear;
}
.bounce-leave-active {
 animation: bounce-out 0.5s linear;
}
@keyframes bounce-in {
 0% {
  transform: scale(0);
 }
 50% {
  transform: scale(1.5);
 }
 100% {
  transform: scale(1);
 }
}
@keyframes bounce-out {
 0% {
  transform: scale(1);
 }
 50% {
  transform: scale(1.5);
 }
 100% {
  transform: scale(0);
 }
}

3、自定义过度类名

  1. enter-class
  2. enter-active-class
  3. leave-class
  4. leave-active-class

 他们的优先级高于普通的类名,这对于 Vue 的过渡系统和其他第三方 CSS 动画库,如 Animate.css 结合使用十分有用。

<link href="https://unpkg.com/animate.css@3.5.1/animate.min.css" rel="external nofollow" rel="stylesheet" type="text/css">

<div id="example-3">

 <button @click="show = !show">

  Toggle render

 </button>

 <transition

  name="custom-classes-transition"

  enter-active-class="animated tada"

  leave-active-class="animated bounceOutRight"

 >

  <p v-if="show">hello</p>

 </transition>

</div>
new Vue({
 el: '#example-3',
 data: {
  show: true
 }
})

可以在样式中同时使用transition和animation

4、利用JavaScript钩子函数实现过渡效果

<transition
 v-on:before-enter="beforeEnter"
 v-on:enter="enter"
 v-on:after-enter="afterEnter"
 v-on:enter-cancelled="enterCancelled"
 v-on:before-leave="beforeLeave"
 v-on:leave="leave"
 v-on:after-leave="afterLeave"
 v-on:leave-cancelled="leaveCancelled"
>
 <!-- ... -->
</transition>
methods: {
 // --------
 // 进入中
 // --------
 beforeEnter: function (el) {
  // ...
 },
 // 此回调函数是可选项的设置
 // 与 CSS 结合时使用
 enter: function (el, done) {
  // ...
  done()
 },
 afterEnter: function (el) {
  // ...
 },
 enterCancelled: function (el) {
  // ...
 },
 // --------
 // 离开时
 // --------
 beforeLeave: function (el) {
  // ...
 },
 // 此回调函数是可选项的设置
 // 与 CSS 结合时使用
 leave: function (el, done) {
  // ...
  done()
 },
 afterLeave: function (el) {
  // ...
 },
 // leaveCancelled 只用于 v-show 中
 leaveCancelled: function (el) {
  // ...
 }
}

在使用钩子函数实现动画的时候注意dom的异步刷新,需要结合this.$nextTick(),同时在leave和enter中设置样式前最好迫使dom进行回流(reflow)使dom重新渲染,如获取元素的offsetHeight等,然后在this.$nextTick()中设置新的样式,不然又可能实现不了动画的效果

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

Javascript 相关文章推荐
Javascript代码混淆综合解决方案-Javascript在线混淆器
Dec 18 Javascript
javascript获取当前ip的代码
May 10 Javascript
jqGrid jQuery 表格插件测试代码
Aug 23 Javascript
node.js中的http.response.end方法使用说明
Dec 14 Javascript
AngularJS中的过滤器使用详解
Jun 16 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
Nov 21 Javascript
jQuery实现广告条滚动效果
Aug 22 jQuery
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 Javascript
解决layui中的form表单与button的点击事件冲突问题
Aug 15 Javascript
vue不操作dom实现图片轮播的示例代码
Dec 18 Javascript
javascript实现前端成语点击验证
Jun 24 Javascript
基于vue实现swipe轮播组件实例代码
May 24 #Javascript
js实现分页功能
May 24 #Javascript
基于Vue的文字跑马灯组件(npm 组件包)
May 24 #Javascript
React简单介绍
May 24 #Javascript
bootstrap3使用bootstrap datetimepicker日期插件
May 24 #Javascript
微信小程序本地缓存数据增删改查实例详解
May 24 #Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
May 24 #Javascript
You might like
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
JS的递增/递减运算符和带操作的赋值运算符的等价式
2007/12/08 Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
2010/06/18 Javascript
Jquery 数据选择插件Pickerbox使用介绍
2012/08/24 Javascript
jquery select多选框的左右移动 具体实现代码
2013/07/03 Javascript
JavaScript设计模式之策略模式实例
2014/10/10 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
2015/12/04 Javascript
详解JavaScript权威指南之对象
2016/09/27 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
2017/02/22 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
2017/06/12 jQuery
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
2018/07/24 Javascript
vue.js响应式原理解析与实现
2020/06/22 Javascript
Vue 3.0 全家桶抢先体验
2020/04/28 Javascript
Node.js path模块,获取文件后缀名操作
2020/11/07 Javascript
Python的pycurl包用法简介
2015/11/13 Python
如何通过python画loss曲线的方法
2019/06/26 Python
wxPython实现文本框基础组件
2019/11/18 Python
基于Keras中Conv1D和Conv2D的区别说明
2020/06/19 Python
Python环境搭建过程从安装到Hello World
2021/02/05 Python
自我评价个人范文
2013/12/16 职场文书
自考生自我评价分享
2014/01/18 职场文书
愚人节活动策划方案
2014/03/11 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
二手房购房协议书范本
2014/10/05 职场文书
万里长城导游词
2015/01/30 职场文书
兵马俑的导游词
2015/02/02 职场文书
大学生团支书竞选稿
2015/11/21 职场文书
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
2021/03/30 HTML / CSS
8g内存用python读取10文件_面试题-python 如何读取一个大于 10G 的txt文件?
2021/05/28 Python
Python 内置函数速查表一览
2021/06/02 Python
Javascript使用integrity属性进行安全验证
2021/11/07 Javascript
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL
SQL Server中的游标介绍
2022/05/20 SQL Server