VUE添加过渡动画的四个方法总结_.slide-fade-enter-active-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_48182769/article/details/119820072

本文总结了Vue中实现过渡动画的四种方法：1）利用默认类名；2）自定义类名前缀并指定transition的name属性；3）结合JS钩子和Velocity.js；4）使用自定义类名配合第三方CSS动画库Animate.css。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、使用默认类名来指定过渡动画

六个默认类名

2、自定义类名前缀来指定过渡动画（需要在transition中指定name）

<div id="example-1">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition name="slide-fade">
    <p v-if="show">hello</p>
  </transition>
</div>


JSnew Vue({
  el: '#example-1',
  data: {
    show: true
  }
})

.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

3、JS钩子来指定过渡动画，可以与Velocity.js 结合使用

<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>

4、自定义类名的方式来指定过渡动画，可以与第三方 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
  }
})