教你用Vue如何实现过渡&动画效果

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果Vue 提供了transition的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡条件渲染 (使用 v-if)条件展示 (使用 v-show)动态组件组件根节点简单例子<div id="demo"><button v-on:click="show = !show">Toggle</

息闻

7041人浏览 · 2022-05-10 14:11:11

息闻 · 2022-05-10 14:11:11 发布

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果

Vue 提供了transition的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡

条件渲染 (使用 v-if)
条件展示 (使用 v-show)
动态组件
组件根节点

简单例子

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>
                                                                                                  
new Vue({
  el: '#demo',
  data: {
    show: true
  }
})
                                                                                                 
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

使用时将要被实现过渡或者动画效果的标签包上transition 标签设置name值，用来在css绑定效果，这里又要说到过渡类名

Vue 给我们提供了 6 种过渡类名

v-enter：定义了进入过渡的第一帧，在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-enter-to：定义进入过渡的结束状态，在元素插入后的下一站生效（与此同时v-enter被移除）
v-leave：定义了离开过渡的第一帧，在离开过渡触发是离开生效，下一帧被移除
v-leave-active：定义离开过渡生效时的状态。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to：定义进入过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时v-leave被删除)，在过渡/动画完成之后移除。

上面的是我抄的文档内容，简单点理解就是：

v-enter：就是进入时候的第一帧
v-enter-to：就是进入时候的第二帧（这帧结束进入效果结束）
v-enter-active：就是第一帧和第二帧中间的执行过程
v-leave：就是离开时候的第一帧
v-leave-to：就是离开时候的第二帧（这帧结离开效果结束）
v-leave-active：就是第一帧和第二帧中间的执行过程

所以类名的生效顺序(以进入过渡为例)是这样的

元素被插入 —> 进入过渡的第一帧 —> 进入过渡的第二帧 —> 进入过渡结束

对于过渡类名，如果你使用一个没有名字的，则v-是这些类名的默认前缀。如果你使用了，那么v-enter会替换为my-transition-enter。

animation结合使用

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

上面的transition结合animation实现效果，直接抄上面代码运行，实际的改一改就能理解

自定义过渡类名

enter-class
enter-active-class
enter-to-class
leave-class
leave-active-class
leave-to-class

你在理解的时候可以把后面的class忽略就和上面的transition的过渡类名意思相同了，社么时候执行什么样的类的效果

自定义过渡类名主要是配合第三方CSS 动画库使用，比如Animate.css

例子

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" 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
  }
})

就拿 enter-active-class=“animated tada” 简单讲一下，enter-active-class 就是进入的时候要执行的类效果，animated tada就是添加的类的效果，详细的animated tada可以去Animate.css实际使用一下非常简单

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 结合使用时
  // 回调函数 done 是可选的
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // 离开时
  // --------

  beforeLeave: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

这些钩子函数可以结合 CSStransitions/animations使用，也可以单独使用。

多个元素过渡

<transition>
  <button v-if="isEditing" key="save">
    Save
  </button>
  <button v-else key="edit">
    Edit
  </button>
</transition>

当有相同标签名的元素切换时，需要通过key 设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。即使在技术上没有必要，给在组件中的多个元素设置 key 是一个更好的实践。

过渡模式

可以设定元素的过渡出现和离开的执行方式

in-out：新元素先进行过渡，完成之后当前元素过渡离开。
out-in：当前元素先进行过渡，完成之后新元素过渡进入。

具体效果看官方例子

列表排序过渡

组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。要使用这个新功能只需了解新增的v-moveclass，它会在元素的改变定位的过程中应用。像之前的类名一样，可以通过nameattribute 来自定义前缀，也可以通过move-classattribute 手动设置。

v-move对于设置过渡的切换时机和过渡曲线非常有用，你会看到如下的例子：

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>

<div id="flip-list-demo" class="demo">
  <button v-on:click="shuffle">Shuffle</button>
  <transition-group name="flip-list" tag="ul">
    <li v-for="item in items" v-bind:key="item">
      {{ item }}
    </li>
  </transition-group>
</div>
                                                                                                   
new Vue({
  el: '#flip-list-demo',
  data: {
    items: [1,2,3,4,5,6,7,8,9]
  },
  methods: {
    shuffle: function () {
      this.items = _.shuffle(this.items)
    }
  }
})
                                                                                                 
.flip-list-move {
  transition: transform 1s;
}