详解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 得到当前页面高度和宽度的两个函数
Feb 21 Javascript
表单JS弹出填写提示效果代码
Apr 16 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
Sep 10 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
Mar 21 Javascript
深入学习AngularJS中数据的双向绑定机制
Mar 04 Javascript
原生js编写基于面向对象的分页组件
Dec 05 Javascript
JS操作xml对象转换为Json对象示例
Mar 25 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 Javascript
js脚本编写简单刷票投票系统
Jun 27 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
Webpack3+React16代码分割的实现
Mar 03 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
PHP5中GD库生成图形验证码(有汉字)
2013/07/28 PHP
thinkphp中html:list标签传递多个参数实例
2014/10/30 PHP
利用PHPExcel读取Excel的数据和导出数据到Excel
2017/05/12 PHP
浅析PHP7的多进程及实例源码
2019/04/14 PHP
JS防止用户多次提交的简单代码
2013/08/01 Javascript
node.js中的fs.statSync方法使用说明
2014/12/16 Javascript
HTML5实现留言和回复页面样式
2015/07/22 Javascript
js跨域请求数据的3种常用的方法
2015/12/01 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
2016/05/27 Javascript
NodeJS学习笔记之Module的简介
2017/03/24 NodeJs
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
vue cli使用绝对路径引用图片问题的解决
2017/12/06 Javascript
解决vue 更改计算属性后select选中值不更改的问题
2018/03/02 Javascript
Vue Router 实现动态路由和常见问题及解决方法
2020/03/06 Javascript
Javascript数组及类数组相关原理详解
2020/10/29 Javascript
用javascript实现倒计时效果
2021/02/09 Javascript
[51:11]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS DT
2014/05/22 DOTA
[07:20]2018DOTA2国际邀请赛寻真——逐梦Mineski
2018/08/10 DOTA
在类Unix系统上开始Python3编程入门
2015/08/20 Python
在windows系统中实现python3安装lxml
2016/03/23 Python
Ubuntu 下 vim 搭建python 环境 配置
2017/06/12 Python
对python_discover方法遍历所有执行的用例详解
2019/02/13 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
Python调用钉钉自定义机器人的实现
2020/01/03 Python
pycharm如何实现跨目录调用文件
2020/02/28 Python
Ubuntu权限不足无法创建文件夹解决方案
2020/11/14 Python
HTML5计时器小例子
2013/10/15 HTML / CSS
业务员岗位职责
2013/11/16 职场文书
《放飞蜻蜓》教学反思
2014/04/27 职场文书
展览会邀请函
2015/02/02 职场文书
煤矿百日安全活动总结
2015/05/07 职场文书
学校隐患排查制度
2015/08/05 职场文书
忠诚教育学习心得体会
2016/01/23 职场文书
详解MongoDB的条件查询和排序
2021/06/23 MongoDB
spring 项目实现限流方法示例
2022/07/15 Java/Android