详解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 相关文章推荐
Firefox outerHTML实现代码
Jun 04 Javascript
javascript操作cookie的文章(设置,删除cookies)
Apr 01 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
Mar 14 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
Sep 02 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 Javascript
jQuery中使用animate自定义动画的方法
May 29 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
Mar 13 Javascript
JS请求servlet功能示例
Jun 01 Javascript
JavaScript实现多态和继承的封装操作示例
Aug 20 Javascript
详解vscode中vue代码颜色插件
Oct 11 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
May 22 Javascript
JS寄快递地址智能解析的实现代码
Jul 16 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
用PHP编程语言开发动态WAP页面
2006/10/09 PHP
C#使用PHP服务端的Web Service通信实例
2014/04/08 PHP
PHP中怎样防止SQL注入分析
2014/10/23 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
Javascript 圆角div的实现代码
2009/10/15 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
2011/10/18 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
使用PHP+JQuery+Ajax分页的实现
2013/04/23 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
简介JavaScript中的sub()方法的使用
2015/06/08 Javascript
使用AngularJS实现可伸缩的页面切换的方法
2015/06/19 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
2016/10/13 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
2016/11/03 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
vue 2.x 中axios 封装的get 和post方法
2018/02/28 Javascript
深入分析element ScrollBar滚动组件源码
2019/01/22 Javascript
JavaScript将数组转换为链表的方法
2020/02/16 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
[46:00]Ti4 冒泡赛第二轮LGD vs C9 2
2014/07/14 DOTA
python用pickle模块实现“增删改查”的简易功能
2017/06/07 Python
Linux下python3.7.0安装教程
2018/07/30 Python
python批量复制图片到另一个文件夹
2018/09/17 Python
python实现两张图片的像素融合
2019/02/23 Python
安装PyInstaller失败问题解决
2019/12/14 Python
Python实现捕获异常发生的文件和具体行数
2020/04/25 Python
Django Form常用功能及代码示例
2020/10/13 Python
Python爬虫实例之2021猫眼票房字体加密反爬策略(粗略版)
2021/02/22 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
美国当红的名品折扣网:Gilt Groupe
2016/08/15 全球购物
保密承诺书
2014/03/27 职场文书
工作简报怎么写
2015/07/21 职场文书
2016大学军训通讯稿
2015/11/25 职场文书
如何写好竞聘报告
2019/04/03 职场文书
Java 实战项目之家居购物商城系统详解流程
2021/11/11 Java/Android