Vue动画实战-优快云博客

本文详细介绍了如何在Vue中使用动画提升用户体验，包括过渡类名、第三方CSS动画库的应用，以及动画钩子函数的自定义实现，旨在帮助开发者掌握Vue动画的实践技巧。

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

为什么要有动画：动画能够提高用户的体验，帮助用户更好的理解页面中的功能；

使用过渡类名
HTML结构：

这里是引用

<input type="button" value="动起来" @click="myAnimate">
<!-- 使用 transition 将需要过渡的元素包裹起来 -->
<transition name="fade">
  <div v-show="isshow">动画哦</div>
</transition>

1. VM 实例：

// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
  el: '#app',
  data: {
    isshow: false
  },
  methods: {
    myAnimate() {
      this.isshow = !this.isshow;
    }
  }
});

定义两组类样式：

/* 定义进入和离开时候的过渡状态 */
.fade-enter-active,
.fade-leave-active {
transition: all 0.2s ease;
position: absolute;
}

 /* 定义进入过渡的开始状态 和 离开过渡的结束状态 */
 .fade-enter,
 .fade-leave-to {
   opacity: 0;
   transform: translateX(100px);
 }

这里是引用
使用第三方 CSS 动画库

导入动画类库：
定义 transition 及属性：

<transition
	enter-active-class="fadeInRight"
    leave-active-class="fadeOutRight"
    :duration="{ enter: 500, leave: 800 }">
  	<div class="animated" v-show="isshow">动画哦</div>
</transition>

使用动画钩子函数

定义 transition 组件以及三个钩子函数：

<div id="app">
    <input type="button" value="切换动画" @click="isshow = !isshow">
    <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter">
      <div v-if="isshow" class="show">OK</div>
    </transition>
  </div>

定义三个 methods 钩子方法：

methods: {
        beforeEnter(el) { // 动画进入之前的回调
          el.style.transform = 'translateX(500px)';
        },
        enter(el, done) { // 动画进入完成时候的回调
          el.offsetWidth;
          el.style.transform = 'translateX(0px)';
          done();
        },
        afterEnter(el) { // 动画进入完成之后的回调
          this.isshow = !this.isshow;
        }
      }