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

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

实现动画必须要将要进行动画的元素利用<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 完成之后

通过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()中设置新的样式,不然又可能实现不了动画的效果

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

(0)

相关推荐

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

    一.实现动画过渡效果的几种方式 实现动画必须要将要进行动画的元素利用<transition>标签进行包裹 1.利用CSS样式实现过渡效果 <transition name="fade"></transition> 1.v-enter: 定义进入过渡的开始状态.在元素被插入时生效,在下一个帧移除. 2.v-enter-active: 定义进入过渡的结束状态.在元素被插入时生效,在 transition/animation 完成之后移除. 3.v-lea

  • 详解vue中v-bind:style效果的自定义指令

    自定义指令 1.什么是自定义指令 以 v- 为前缀,然后加上自己定义好的名字组成的一个指令就是自定义指令.为什么要有自定义指令呢?在有些时候,你仍然需要对普通的DOM元素进行底层的操作,这个时候就可以用到自定义指令. 2.自定义指令的语法 全局自定义指令 // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时-- inserted: function (el) { // 聚焦元素 el.focus() } })

  • 详解vue中v-model和v-bind绑定数据的异同

    vue的模板采用DOM模板,也就是说它的模板可以当做DOM节点运行,在浏览器下不报错,绑定数据有三种方式,一种是插值,也就是{{name}}的形式,一种是v-bind,还有一种是v-model.{{name}}的形式比较好理解,就是以文本的形式和实例data中对应的属性进行绑定.比如: var app = new Vue({ el: '#app', template: '<div @click="toggleName">{{name}}</div>', data

  • 详解vue中使用transition和animation的实例代码

    以前写页面注重在功能上,对于transition和animation是只闻其声,不见其人,对于页面动画效果心理一直痒痒的.最近做活动页面,要求页面比较酷炫,终于有机会认真了解了. transition:英文过渡的意思,作用是过渡效果:animation:英文活泼.生气.激励,动画片就是animation film,作用是动画效果. transition在w3school的实例: //将鼠标悬停在一个 div 元素上,逐步改变表格的宽度从 100px 到 300px: div { width:10

  • 详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法

    最近在项目中实现在循环出来的图片中当鼠标移入隐藏当前图片显示另一张图片的需求时碰到了一个小问题.就是当使用@mouseenter 和@mouseleave事件来实现这个需求时却发现鼠标移入后图片出现闪烁现象. 重点:事件写到父元素上才行!!! 0.0 下面写下我的实现方法和实现效果 样式代码: <div class="imgs" v-for="(item,index) in exampleUrl" :key = index @mouseenter ="

  • 详解Vue中的MVVM原理和实现方法

    下面由我阿巴阿巴的详细走一遍Vue中MVVM原理的实现,这篇文章大家可以学习到: 1.Vue数据双向绑定核心代码模块以及实现原理 2.订阅者-发布者模式是如何做到让数据驱动视图.视图驱动数据再驱动视图 3.如何对元素节点上的指令进行解析并且关联订阅者实现视图更新 一.思路整理 实现的流程图: 我们要实现一个类MVVM简单版本的Vue框架,就需要实现一下几点: 1.实现一个数据监听Observer,对数据对象的所有属性进行监听,数据发生变化可以获取到最新值通知订阅者. 2.实现一个解析器Compi

  • 详解vue中v-on事件监听指令的基本用法

    一.本节说明 我们在开发过程中经常需要监听用户的输入,比如:用户的点击事件.拖拽事件.键盘事件等等.这就需要用到我们下面要学习的内容v-on指令. 我们通过一个简单的计数器的例子,来讲解v-on指令的使用. 二. 怎么做 定义数据counter,用于表示计数器数字,初始值设置为0 v-on:click 表示当发生点击事件的时候,触发等号里面的表达式或者函数 表达式counter++和counter--分别实现计数器数值的加1和减1操作 语法糖:我们可以将v-on:click简写为@click 三

  • 详解vue中v-for的key唯一性

    1. DOM Diff 要想真正了解 key 属性的存在意义,还真得从 DOM Diff 说起,并不需要深入了解 DOM Diff 的原理,而是仅仅需要知道 DOM Diff 的工作过程即可. Vue 和 React 都采用了运用虚拟 DOM 的方式减少浏览器不必要的渲染.由于 Vue 和 React 采用的都是 v = render( m ) 的方式渲染视图的,当 model 数据发生变化时,视图更新的方式就是重新 render DOM 元素.但是有时候我们只是改变了一个组件中的某一个 div

  • 详解Vue中$refs和$nextTick的使用方法

    目录 1.$refs简介 $refs获取DOM元素 $refs获取组件对象 2.$nextTick基本使用 vue异步更新DOM 利用$nextTick解决以上问题 $nextTick使用场景 1.$refs简介 $refs是vue提供的获取真实dom的方法. $refs获取DOM元素 [使用步骤]: 在原生DOM元素上添加ref属性利用this.$refs获取原生的DOM元素 [代码演示]: <template> <div> <h1>获取原生的DOM元素</h1

  • 详解Vue中Computed与watch的用法与区别

    目录 computed computed只接收一个getter函数 computed同时接收getter函数对象和setter函数对象 调试 Computed watchEffect 立即执行 监听基本数据类型 停止watchEffect 清理watchEffect watchPostEffect 和 watchSyncEffect watchEffect不能监听对象 watch 监听单个数据 监听多个数据(传入数组) 官方文档总结 computed watchEffect watch comp

随机推荐