vue动画transition

最新推荐文章于 2025-04-25 23:29:39 发布

原创最新推荐文章于 2025-04-25 23:29:39 发布 · 519 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#动画 #class

Vue 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了Vue 2.0中过渡动画的使用方法及与1.0的区别，包括过渡类名的设置、过渡钩子函数的应用以及如何与animate.css配合使用等关键知识点。

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

vue2.0后transition也有了一些改动
1.0时：

<p transition="fade"></p>

.fade-transition{}
.fade-enter{}
.fade-leave{}

2.0后：

<transition name="fade">
    运动东西(元素，属性、路由....)
</transition>

class定义:
.fade-enter{}   //初始状态
.fade-enter-active{}  //变化成什么样  ->  当元素出来(显示)

.fade-leave{}
.fade-leave-active{} //变成成什么样   -> 当元素离开(消失)

练习代码：

    <div id="box">
        <input type="button" value="点击显示隐藏" @click="show=!show">

        <transition name="fade"
            @before-enter="beforeEnter"
            @enter="enter"
            @after-enter="afterEnter"

            @before-leave="beforeLeave"
            @leave="leave"
            @after-leave="afterLeave"
        >
            <p v-show="show"></p>
        </transition>
    </div>


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

        .fade-enter-active{
            opacity:1;
            width:300px;
            height:300px;
        }
        .fade-leave-active{
            opacity:0;
            width:100px;
            height:100px;
        }

        .fade-enter,.fade-leave{
            opacity:0;
            width:100px;
            height:100px;
        }

                methods:{
                    beforeEnter(el){
                        console.log('动画enter之前');
                    },
                    enter(el){
                        console.log('动画enter进入');
                    },
                    afterEnter(el){
                        console.log('动画进入之后');
                        el.style.background='blue';
                    },
                    beforeLeave(el){
                        console.log('动画leave之前');
                    },
                    leave(el){
                        console.log('动画leave');
                    },
                    afterLeave(el){
                        console.log('动画leave之后');
                        el.style.background='red';
                    }
                }

多个元素运动:
    <transition-group enter-active-class="" leave-active-class="">
        <p :key=""></p>
        <p :key=""></p>
    </transition-group>

如何animate.css配合用？
    <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
          <p v-show="show"></p>
    </transition>