详解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 相关文章推荐
jquery 分页控件实现代码
Nov 30 Javascript
javascript中判断一个值是否在数组中并没有直接使用
Dec 17 Javascript
一个实用的图片切换支持点击切换和自动轮播
Sep 09 Javascript
JS的数组迭代方法
Feb 05 Javascript
跟我学习javascript的var预解析与函数声明提升
Nov 16 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
Jan 07 Javascript
浅谈js原生拖放
Nov 21 Javascript
移动端脚本框架Hammer.js
Dec 15 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
Jan 04 Javascript
Angular 输入框实现自定义验证功能
Feb 19 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
Jan 25 Javascript
vue中如何使用ztree
Feb 06 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
在数据量大(超过10万)的情况下
2007/01/15 PHP
PHP 学习路线与时间表
2010/02/21 PHP
PHP封装分页函数实现文本分页和数字分页
2014/10/23 PHP
PHP多个图片压缩成ZIP的方法
2020/08/18 PHP
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
JS中图片缓冲loading技术的实例代码
2013/08/29 Javascript
jquery如何根据值设置默认的选中项
2014/03/17 Javascript
jquery解析xml字符串简单示例
2014/04/11 Javascript
JavaScript中document对象使用详解
2015/01/06 Javascript
javascript 应用小技巧方法汇总
2015/07/05 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
微信小程序 input输入及动态设置按钮的实现
2017/10/27 Javascript
解决vue 项目引入字体图标报错、不显示等问题
2018/09/01 Javascript
浅谈webpack4 图片处理汇总
2018/09/12 Javascript
对 Vue-Router 进行单元测试的方法
2018/11/05 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
vue 获取视频时长的实例代码
2019/08/20 Javascript
Vue中使用better-scroll实现轮播图组件
2020/03/07 Javascript
python发送邮件的实例代码(支持html、图片、附件)
2013/03/04 Python
Python里disconnect UDP套接字的方法
2015/04/23 Python
使用 Python 快速实现 HTTP 和 FTP 服务器的方法
2019/07/22 Python
Python3-异步进程回调函数(callback())介绍
2020/05/02 Python
详解Pymongo常用查询方法总结
2021/01/29 Python
详解CSS3浏览器兼容
2016/12/14 HTML / CSS
TUMI澳大利亚网站:美国旅行箱包品牌
2017/03/27 全球购物
琳达·法罗眼镜英国官网:Linda Farrow英国
2021/01/19 全球购物
转预备党员政审材料
2014/02/06 职场文书
国培远程培训感言
2014/03/08 职场文书
《有趣的发现》教学反思
2014/04/15 职场文书
安全施工标语
2014/06/07 职场文书
工程竣工验收申请报告
2015/05/15 职场文书
《追风筝的人》:人心中的成见是座大山,但请不忘初心
2019/11/15 职场文书
MySQL EXPLAIN输出列的详细解释
2021/05/12 MySQL
分享一些Java的常用工具
2021/06/11 Java/Android
Java tomcat手动配置servlet详解
2021/11/27 Java/Android
GoFrame框架数据校验之校验结果Error接口对象
2022/06/21 Golang