Vue入门-动画

最新推荐文章于 2024-07-09 10:14:58 发布

原创最新推荐文章于 2024-07-09 10:14:58 发布 · 530 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#动画

Vue 同时被 2 个专栏收录

76 篇文章

订阅专栏

动画

6 篇文章

订阅专栏

Vue中的动画主要用于提升用户体验，通常在功能实现后添加。本文介绍了Vue中过渡动画的使用场景，如结合路由切换，详细讲解了设置动画的步骤，并列出了一些常用的过渡类名，如v-leave-active，用于定义离开过渡的状态。同时，提供了代码示例和实际效果展示。

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

动画

动画,本质是一个效果,与交互功能无关, 通常开发过程中首先实现功能，而后添加动画。Vue中常用的过渡动画，实现显示或者隐藏等，优化用户体验。

使用场景

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡

1、条件渲染 (使用 v-if)
2、条件展示 (使用 v-show)
3、结合路由切换

使用步骤

1、把需要结合动画变化的元素,使用transition包裹起来
2、起一个过渡动画的名字
3、设置动画

常用的过度的类名

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-leave-to: 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

代码示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        /*设置起始值*/

        .fade-enter,
        .fade-leave-to {
            transform: translateY(-50px);
            opacity: 0;
        }

        /*设置动画的变化过程*/

        .fade-enter-active,
        .fade-leave-active {
            transition: 1s ease;
        }

        #app {
            width: 300px;
            margin: auto;
            border: 1px solid lightblue;
            border-radius: 8px;
            text-align: center;
            padding: 10px;
        }

        .wrapper {
            width: 100px;
            height: 100px;
            background: red;
            margin: 20px auto;
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="showDiv()">{{btnText}}</button>
        <transition name="fade">
            <div class="wrapper" v-if="isShow"></div>
        </transition>

    </div>
</body>

</html>
<script>
    new Vue({
        el: '#app',
        data: {
            isShow: true,
            btnText: '点击移出'
        },
        methods:{
            showDiv(){
                this.isShow=!this.isShow;
                if (!this.isShow) {
                    this.btnText = '点击进入';
                }else{
                    this.btnText = '点击移出';
                }
            }
        }
    })
</script>

效果图