vue transition过度动画的 css使用

vue的过度动画有两种方式

一种是使用 Css的方式来进行设置，另一种就是通过js的方法

这里介绍一下 css 方法

1.首先在template中加入要有过度效果的元素

<template>
    <div class="container">
        <transition name="myactive">
            <div v-show="showtag">我是要过度的元素</div>
        </transition>

        <button @click="showtag = !showtag"></button>

    </div>

</template>

<script>
    export default {
        data(){
            return {
                showtag:true
            }
        }
        
    }

</script>

<style>
    .myactive-enter{ //此处是动画进入时的css设置，如果有位置移动的话，不要使用position来控制，会没有效果的，使用 transform:translateY 或者 translateX来控制
        transform:translateY(-500px);
    }
    .myactive-leave-avtive{//此处地动画飞出时的设置
        transform:translateY(500px);
    }
    .myactive-enter-active,.myactive-leave-active{ //此处是过度过程中，一般不用设置
        //该句的意思是 all表示所有的css变动  在 0.8s内完成  ease-out是一个速度曲线充置
        transition:all .8s ease-out;
    }

</style>

说明，transition动画要注意三个过程如图

vue transition过度动画的 css使用

v-enter:表示元素刚进入的时候 css设置时这里是不可少的（第一过程）

(v-enter-active,v-leave-active) 这里可以理解为一个达到稳定的状态，（第二过程，也是中间实际显示的过程）

这个过程一般就设置动画的时长，不用设置其它的如 {transition:all .8s ease-out}

v-leave-active 表示元素飞出的时候 css 设置时这是也是不可少的（第三过程）

v-leave 基本不用考虑，

vue transition过度动画的 css使用

相关推荐