VUE中过渡

VUE中过渡

6个过渡指令
v-enter
v-enter-active
v-enter-to
v-leave
v-leave-active
v-leave-to

过渡动画的使用
1.要做过渡都要在

标签里面

2.给<transition>命名 <transition name="fade">

3.在style中进行过渡动画编写
.fade-enter
就是把前面6个过渡指令的v换成fade

//css的transition允许css的属性值在一定的时间内从一个状态平滑的过渡到另一个状态。这种状态可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并平滑的以动画效果改变css的属性值

<template>
    <div>
        <button @click="Btn = !Btn">点击过渡</button>
        <transition name="fade">
            <div class="box" v-if="Btn">
                学院
            </div>
        </transition>
    </div>
</template>

<script>
    export default {
        name: "TransitionAndAnimate",
        data(){
            return{
                Btn:false,
            }
        }
    }
</script>

<style scoped>
    .box{
        width: 200px;
        height: 200px;
        background: red;
        color: #fff;
        font-size: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .fade-enter, .fade-leave-to{
        opacity: 0;
        transform: translateX(200px);
    }
    .fade-enter-active,.fade-leave-active{
        transition:all 2s ease-in-out;
    }
</style>