Vue过渡动画

最新推荐文章于 2022-09-22 22:55:34 发布

huxiaoxiao.

最新推荐文章于 2022-09-22 22:55:34 发布

阅读量292

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/lolhuxiaotian/article/details/121485434

版权

vue 专栏收录该内容

65 篇文章 2 订阅

订阅专栏

在Vue 中，提供了6类名，其中包括4状态点，2个过程

进入动画的三个类：

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

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

v-enter-to：vue2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

离开动画的三个类：

v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

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

v-leave-to: Vue2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

举个例子：在元素显示和隐藏时，让其的透明度发送变化

使用 vue 中的一个内置组件，把想要发生改变的元素写在 transition 标签中

在使用 v-if 条件指令，通过点击事件让元素进行显示和隐藏

<body>
    
    <div id="app">
        
        <transition name="" mode="">
            <p v-if="show">隐藏时，透明度发生变化</p>
        </transition>
        <button @click="show = !show">点击隐藏</button>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                show:true
            },
            methods: {
                
            }
        })
    </script>
</body>

在 style 标签中，使用 vue提供的类，写出样式：

 

 <style>

/* 进入的过程中，离开的过程中，我们希望渲染的元素的透明度 发生变化 */
        .v-enter-active,.v-leave-active{
            /* 过渡动画 */
            transition: opacity 3s;
        }
        .v-enter,.v-leave-to{
            opacity: 0;
        }
    </style>

在3秒内发生变化，方便我们查看效果：

注意点：我们可以在 transition 标签中给定name 值，那么我们在 style 标签中就不能使用

v- 开头了，要换成我们给定的 name 值

<div id="app">
        
        <transition name="hidden" mode="">
            <p v-if="show">隐藏时，透明度发生变化</p>
        </transition>
        <button @click="show = !show">点击隐藏</button>
    </div>

 <style>

        .hidden-enter-active,.hidden-leave-active{
            transition: opacity 3s;
        }
        .hidden-enter,.hidden-leave-to{
            opacity: 0;
        }
    </style>

结果是一致的

也可以同时设置六个类，在通过动画设置关键帧，来达到一些特定的效果：

 <style>
        /* 点击按钮，进去动画，设置三类 */
        .v-enter{
            opacity: 0;
        }
        .v-enter-active{
           /* 
            动画
            buncuo 动画名称，（关键帧后的名字，自定义）
            5s      完成时间
            linear  匀速
            */
            animation: buncuo 5s linear;
        }
        .v-enter-to{
            opacity: 1;
        }

        /* 关键帧设置 */
        @keyframes buncuo {
            from{
                transform: scale(0);
            }
            50%{
                transform:scale(1.5);
            }
            to{
                transform: scale(1);
            }
        }

        /* 点击按钮，离开动画，设置三类 */
        .v-leave{
            opacity: 0;
        }
        .v-leave-active{
            animation: buncuo-out 5s linear;
        }
        .v-leave-to{
            opacity: 1;
        }

        @keyframes buncuo-out {
            from{
                transform: scale(1);
            }
            50%{
                transform:scale(1.5);
            }
            to{
                transform: scale(0);
            }
        }

    </style>
</head>
<body>
    
    <div id="app">
        
        <!-- 用 vue 中内置的一个组件 -->
        <transition name="" mode="">
            <p v-if="isShow">
                我是一个段落标签 我是一个段落标签 我是一个段落标签 我是一个段落标签 我是一个段落标签 我是一个段落标签 我是一个段落标签 我是一个段落标签 我是一个段落标签 我是一个段落标签 我是一个段落标签 我是一个段落标签
            </p>
        </transition>
   

        <button @click="change()">点击</button>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                isShow:false
            },
            methods: {
                change(){
                    this.isShow = !this.isShow
                }
            }
        })
    </script>
</body>
</html>

完成效果：