[vue] 动画

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第 8 天，点击查看活动详情。

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

Vue 提供了 transition 的封装组件; 那么如何使用呢？

过渡类名

给transition组件添加name,自定义过渡动画效果样式；如果没有给transition定义name属性，类名默认以v-开头, 如：v-enter；如果定义了name = "fade", 那么类名就以fade-为前缀，如: fade-enter

css类名要按vue要求使用

在进入/离开的过渡中，会有 6 个 class 切换:

• v-enter:：进入过渡的开始状态，在元素被插入之前生效，在元素被插入之后的下一帧移除。
• v-enter-active：进入过渡生效时，在整个进入过渡的阶段中应用
• v-enter-to：进入过渡的结束状态
• v-leave：离开过渡的开始状态
• v-leave-active：离开过渡生效时的状态
• v-leave-to：离开过渡的结束状态

css动画库

通过自定义过渡的类名与 Animate.css动画库有效结合使用

可以通过以下 attribute 来自定义过渡类名：

• enter-class

• enter-active-class

• enter-to-class (2.1.8+)

• leave-class

• leave-active-class

• leave-to-class (2.1.8+)
  他们的优先级高于普通的类

• 1、引入css

• 2、设置transition

• 3、取对应动画的过渡类名

<transition 
    enter-active-class='animate__animated animate__fadeIn' 
    leave-active-class='animate__animated animate__fadeOut'>
    
    ...
    
</transition>

js动画库

声明 JavaScript 钩子结合js动画库如 velocity.js，一起使用。

使用方式：

• 引入js
• 设置transition，声明钩子

<transition name="fade"
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"

    v-on:before-leave="beforeLeave"
    v-on:leave="leave"
    >
    
    ...
    
</transition>

methods: {
    beforeEnter(el) {
        el.style.opacity = 0;
    },
    enter(el, done) {
        Velocity(el, {opacity: 1}, {duration: 1500, complete: done})
    },
    beforeLeave(el) {
        el.style.opacity = 1;
    },
    leave(el, done) {
        Velocity(el, {opacity: 0}, {duration: 1500, complete: done})
    }
}

列表过渡

利用transition-group可以对v-for渲染的每个元素应用过渡。

/* 动画样式 */
/* 入场前的状态 */
.fade1-enter, .fade1-leave-to{
    opacity: 0;
}

/* 过度定义 */
.fade1-enter-active, .fade1-leave-active {
    transition: opacity 1.5s;
}

<transition-group name='fade'>
    <li v-for="item in arr" :key="id" >
        {{item}}
    </li>
</transition-group>

当新增或删除数据时显示动画效果。