vue过渡动画效果

news2024/11/18 20:39:59

官网:https://cn.vuejs.org/v2/api/#transition

要与v-show,v-if 动态组件结合

给需要过渡的元素外层加<transition> ,并用name命名 ,

show:true,
---------------------
<button @click="show=!show">button</button>
<transition name='fade'>
    <p v-show="show">456</p>
</transition>

使用CSS过渡

使用css设置具体的动画,css命名规则为 .name对应的值-enter-active等(是class)

在这里插入图片描述

淡入淡出样式

在style中定义样式
<style>
.fade-enter-active,.fade-leave-active{
    transition:/*opacity*/ all .5s ;/*属性,时长,还可以加上ease-out,代表变化的曲线*/
    /*指定当前样式有过渡效果,opacity代表透明度*/
}
.fade-enter,.fade-leave-active{
    opacity:0;
    /*进入和出去的时候透明度是0*/
}
</style>

上下左右滑入滑出样式

/*激活阶段,动画控制,*/
.my-trans-enter-active,.my-trans-leave-active{
    transition: all .5s ease-out;/*属性,时长,还可以加上,代表变化的曲线*/
 
}
/*控制动画具体怎么变*/
/*进入动画控制*/
.my-trans-enter{
    /*进入从上方滑入*/
    transform: translateY(-500px);
    opacity: 0;
}
.my-trans-leave-active{
    /*出去,向下滑出*/
    transform: translateY(500px);
    opacity:0;
    /*进入和出去的时候透明度是0*/
    /*指定当前样式有过渡效果,opacity代表透明度*/
}

组件设置过渡

<transition name='my-trans'><!--调用了上下左右滑入滑出样式-->
    <div :is='getTodo'></div>
</transition>
<button @click="getTodoFun">button</button>
---------------
//定义字段:
getTodo:'todo-irem'
------------
//定义方法
getTodoFun:function(){
    if(this.getTodo==='todo-irem'){
        this.getTodo='todo-irem2'
    }else{
        this.getTodo='todo-irem'
    }
}

多元素过渡

多个元素切换,是将新的在下方显示,在将旧的隐藏,有同时出现的机会,默认是in-out

使用out-in,会先将就的去掉,再显示新的
<transition name='my-trans' mode='out-in'> 
    <p v-show="show">456</p>
</transition>

注意,多个元素的时候,过渡动画会消失,需要定义key区分每一个元素

<button @click="show=!show">button</button>
<transition name='fade' mode='out-in'>
    <p v-if="show" key='1'>456</p>
    <p v-else key='2'>11178911</p>
</transition>

使用JS过渡

js控制动画,是通过v-on事件控制的.

使用js过渡的时候,要在transition中绑定 v-bind:css='false'或:css='false'防止css样式的影响

<!--进入前,进入过程中,离开-->
<transition
    @before-enter='beforeEnter'
    @enter='enter' 
    @leave='leave'  
    :css='false'>
    <p class='js-class' v-show="show" >456</p>
</transition>

对应class

.js-class{
    position: absolute;
    top: 50px;
    left: 50px;
    color: red;
}

使用js操作动画:

        beforeEnter:function(el){
            $(el).css({
                left:'-500px',
                opacity:0
            })
        },
        enter:function(el,done){
            $(el).animate({
                left:'50px',/*进入的时候,跑到left到50位置*/
                opacity:1
            },{
                duration:1500,/*执行的ms数*/
                complete:done /*完成的之后*/
            });
        },
        leave:function(el,done){
            $(el).animate({
                left:'500px',/*离开的时候,向右移动500px后消失*/
                opacity:0
            },{
                duration:1500,/*离开时间*/
                complete:done
            })
        }