Vue过渡与动画的实现效果-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue过渡与动画的实现效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

使用 transition 标签配合 CSS3 过渡实现【不完整代码】：

Vue 还提供了四个 class 类名，分别是进入的起点（v-enter）进入的终点（v-enter-to）离开的起点（v-leave）离开的终点（v-leave-to）

<template>
    <div>
        <button @click="isShow = !isShow">显示/隐藏</button>
        <transition appear>
            <h2 v-show="isShow">你好呀！！！</h2>
        </transition>
    </div>
</template>

<script>
export default {
    name: "Home",
    data() {
        return {
            isShow: true
        }
    }
}
</script>

<style scoped>
h2 {
    background-color: aqua;
    transition: 0.5s linear;
}
/* 进入的起点 */
.v-enter {
    transform: translate(-100%);
}
/* 进入的终点 */
.v-enter-to {
    transform: translate(0px);
}
/* 离开的起点 */
.v-leave {
    transform: translate(0px);
}
.v-leave-to {
    transform: translate(-100%);
}
</style>

注：进入的起点和离开的起点就相当于 CSS3 动画里的 from 进入的终点和离开的终点就相当于是 CSS3 动画里的 to .

Vue过渡与动画的实现效果

使用 transition 标签配合 CSS3 过渡实现【完整版代码】：

一般进入的起点和离开的终点样式一样，进入的终点又和离开的起点样式一样。所以也能合并到一起。另外为了不破坏元素原本的样式结构所以过渡属性也推荐写在动画进入的过程和动画离开的过程中。

<template>
    <div>
        <button @click="isShow = !isShow">显示/隐藏</button>
        <transition appear>
            <h2 v-show="isShow">左右滑动</h2>
        </transition>
    </div>
</template>

<script>
export default {
    name: "Home",
    data() {
        return {
            isShow: true
        }
    }
}
</script>

<style scoped>
h2 {
    background-color: aqua;
}
/* 进入的起点、离开的终点 */
.v-enter, .v-leave-to {
    transform: translate(-100%);
}
/* 动画进入的过程、动画离开的过程 */
.v-enter-active, .v-leave-active {
    transition: 0.5s linear;
}
/* 进入的终点，离开的起点 */
.v-enter-to, .v-leave {
    transform: translate(0px);
}
</style>

注：如果 transition 标签没有名称，以上六个 class 名都是以 v- 开头。如果有名称，那么以上六个 class 名都需要以名称- 开头。

使用 transition-group 标签给多个元素设置相同的动画：

transition 标签只能包含一个元素如果想包含多个元素需要使用 transition-group 标签。

<template>
    <div>
        <button @click="isShow = !isShow">显示/隐藏</button>
        <transition-group appear>
            <h2 v-show="isShow" :key="1">为true时显示</h2>
            <h2 v-show="!isShow" :key="2">为false时显示</h2>
        </transition-group>
    </div>
</template>

<script>
export default {
    name: "Home",
    data() {
        return {
            isShow: true
        }
    }
}
</script>

<style scoped>
h2 {
    background-color: aqua;
}
/* 进入的起点、离开的终点 */
.v-enter,
.v-leave-to {
    transform: translate(-100%);
}
/* 动画进入的过程、动画离开的过程 */
.v-enter-active,
.v-leave-active {
    transition: 0.5s linear;
}
/* 进入的终点，离开的起点 */
.v-enter-to,
.v-leave {
    transform: translate(0px);
}
</style>

注：在 transition-group 标签中，每个元素必须有一个 key 值，否则会报错.

Vue过渡与动画的实现效果

使用第三方动画库:

推荐使用 animate.css 动画库，推荐地址：https://animate.style/

Vue过渡与动画的实现效果

安装 animate.css 库，安装命令：

npm install animate.css

Vue过渡与动画的实现效果

在需要使用的页面中引入样式文件，也可以在 main.js 中全局引入。

import "animate.css"

给 transition 标签添加 name 名称表示使用这个样式库。

<transition name="animate__animated animate__bounce" appear>
    <h2 v-show="isShow">使用第三方动画库</h2>
</transition>

然后在 animate.css 官网选择进入和离开时的动画效果.

Vue过渡与动画的实现效果

将进入时的动画效果添加到 enter-active-class 属性中
快离开时的动画效果添加到 leave-active-class 属性中

<template>
    <div>
        <button @click="isShow = !isShow">显示/隐藏</button>
        <transition 
            appear
            name="animate__animated animate__bounce"
            enter-active-class="animate__backInDown"
            leave-active-class="animate__backInLeft"
        >
            <h2 v-show="isShow">使用第三方动画库</h2>
        </transition>
    </div>
</template>

<script>
import "animate.css"
export default {
    name: "Home",
    data() {
        return {
            isShow: true
        }
    }
}
</script>

<style scoped>
h2 {
    background-color: aqua;
}
</style>

然后就可以使用啦！

Vue过渡与动画的实现效果