Vue3 过渡动画效果

概述

Vue 提供了两个内置组件，可以帮助你制作基于状态变化的过渡和动画：

• <Transition> 会在一个元素或组件进入和离开 DOM 时应用动画。
• <TransitionGroup> 会在一个 v-for 列表中的元素或组件被插入，移动，或移除时应用动画。

<Transition>组件

<Transition>是一个内置组件，它可以将进入和离开应用到通过默认插槽传递给它的元素或组件上。

进入或离开可以由以下的条件之一触发：

• 由 v-if 所触发的切换
• 由 v-show 所触发的切换

简单使用

• v-enter-from：进入动画的起始状态。
• v-enter-active：进入动画的生效状态。这个 class 可以被用来定义进入动画的持续时间、延迟与速度曲线类型。
• v-enter-to：进入动画的结束状态。
• v-leave-from：离开动画的起始状态。
• v-leave-active：离开动画的生效状态。这个 class 可以被用来定义离开动画的持续时间、延迟与速度曲线类型。
• v-leave-to：离开动画的结束状态。

<script>
export default {
    data() {
        return {
            show: false,
        }
    },
    methods: {
        handleClick() {
            this.show = !this.show;
        }
    }
}
</script>

<template>
    <div>
        <transition>
            <div v-if="show">hello world</div>
        </transition>
        <button @click="handleClick">切换</button>
    </div>
</template>
<style>
/* 入场效果 */
.v-enter-from {
    opacity: 0;
}

/* 定义过渡效果 */
.v-enter-active {
    transition: opacity 3s ease-out;
}

.v-enter-to {
    opacity: 1;
}

/* 出场效果 */
.v-leave-from {
    opacity: 1;
}

.v-leave-active {
    transition: opacity 3s ease-in;
}

.v-leave-to {
    opacity: 0;
}
</style>

为过渡效果命名

可以给 <Transition> 组件传一个 name prop 来声明一个过渡效果名：

<script>
export default {
    data() {
        return {
            show: false,
        }
    },
    methods: {
        handleClick() {
            this.show = !this.show;
        }
    }
}
</script>
<template>
    <div>
        <transition name="abc">
            <div v-if="show">hello world222</div>
        </transition>
        <button @click="handleClick">切换</button>
    </div>
</template>
<style>
@keyframes my-anim {
    0% {
        transform: translateX(50px);
    }

    50% {
        transform: translateX(-50px);
    }

    100% {
        transform: translateX(50px);
    }
}

.abc-enter-active {
    animation: my-anim 3s;
}

.abc-leave-active {
    animation: my-anim 3s ease-out;
}
</style>

自定义过渡class

可以向 <Transition> 传递以下的 props 来指定自定义的过渡 class：

• enter-from-class
• enter-active-class
• enter-to-class
• leave-from-class
• leave-active-class
• leave-to-class

<script>
export default {
    data() {
        return {
            show: false,
        }
    },
    methods: {
        handleClick() {
            this.show = !this.show;
        }
    }
}
</script>
<template>
    <div>
        <transition enter-active-class="myenter" leave-active-class="myleave">
            <div v-if="show">hello world333</div>
        </transition>
        <button @click="handleClick">切换</button>
    </div>
</template>
<style>
@keyframes my-anim {
    0% {
        transform: translateX(50px);
    }

    50% {
        transform: translateX(-50px);
    }

    100% {
        transform: translateX(50px);
    }
}

.myenter {
    animation: my-anim 3s;
}

.myleave {
    animation: my-anim 3s;
}
</style>

JavaScript动画效果

可以通过监听 <Transition> 组件事件的方式在过渡过程中挂上钩子函数。

添加一个 :css="false" prop。这显式地向 Vue 表明可以跳过对 CSS 过渡的自动探测。

对于 @enter 和 @leave 钩子来说，回调函数 done 就是必须的。否则，钩子将被同步调用，过渡将立即完成。

<script>
export default {
    data() {
        return {
            show: false,
        }
    },
    methods: {
        handleClick() {
            this.show = !this.show;
        },
        handleBeforeEnter(el) {
            el.style.color = "red";
        },
        handleEnter(el, done) {
            let animation = setInterval(() => {
                let color = el.style.color;
                if (color === "red") {
                    el.style.color = "green";
                } else {
                    el.style.color = "red";
                }
            }, 1000)
            setTimeout(() => {
                clearInterval(animation);
                done(); //通知动画结束
            }, 3000)
        },
        handleAfterEnter(el) {
            alert("结束")
        },
    }
}
</script>
<template>
    <div>
        <transition :css="false" @before-enter="handleBeforeEnter" @enter="handleEnter" @after-enter="handleAfterEnter">
            <div v-if="show">hello world444</div>
        </transition>
        <button @click="handleClick">切换</button>
    </div>
</template>

元素间过渡

除了通过 v-if / v-show 切换一个元素，我们也可以通过 v-if / v-else / v-else-if 在几个组件间进行切换，只要确保任一时刻只会有一个元素被渲染即可。

如果你想在某个节点初次渲染时应用一个过渡效果，你可以添加 appear prop：

<script>
export default {
    data() {
        return {
            show: false,
        }
    },
    methods: {
        handleClick() {
            this.show = !this.show;
        }
    }
}
</script>
<template>
    <div>
        <transition mode="out-in" appear>
            <div v-if="show">hello</div>
            <div v-else="show">world</div>
        </transition>
        <button @click="handleClick">切换</button>
    </div>
</template>
<style>
.v-enter-to,
.v-leave-from {
    opacity: 1;
}

.v-enter-from,
.v-leave-to {
    opacity: 0;
}

.v-enter-active,
.v-leave-active {
    transition: opacity 1s ease-in;
}
</style>

<transition-group>组件

<transition-group>是一个内置组件，用于对 v-for 列表中的元素或组件的插入、移除和顺序改变添加动画效果。

列表动画

<script>
export default {
    data() {
        return {
            list: [1, 2, 3]
        }
    },
    methods: {
        handleClick() {
            this.list.unshift(this.list.length + 1);
        }
    }
}
</script>
<template>
    <div>
        <transition-group>
            <span class="list-item" v-for="item in list" :key="item">{{ item }}</span>
        </transition-group>
        <button @click="handleClick">添加</button>
    </div>
</template>
<style>
.list-item {
    display: inline-block;
    margin-right: 10px;
}

.v-enter-from {
    opacity: 0;
    transform: translateY(30px);
}

.v-enter-to {
    opacity: 1;
    transform: translateY(0);
}

.v-enter-active {
    transition: all 0.5s ease-in;
}

.v-move {
    transition: all 0.5s ease-in;
}
</style>

状态动画

<script>
export default {
    data() {
        return {
            animNum: 1
        }
    },
    methods: {
        handleClick() {
            if (this.animNum < 10) {
                let interval = setInterval(() => {
                    this.animNum++;
                    if (this.animNum === 10) {
                        clearInterval(interval);
                    }
                }, 100);
            }
        }
    }
}
</script>
<template>
    <div>
        <transition-group>
            <div>{{ animNum }}</div>
        </transition-group>
        <button @click="handleClick">添加</button>
    </div>
</template>