Vue入门-动画

动画

动画,本质是一个效果,与交互功能无关, 通常开发过程中首先实现功能，而后添加动画。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>

效果图

猜你喜欢