• 欢迎光临~

Vue 封装的过度与动画

开发技术 开发技术 2022-05-20 次浏览

作用:在插入、更新、移除 DOM 元素时,在合适的时候给元素添加样式类名



写法

首先准备好样式

元素进入的样式

  • v-enter:进入的起点
  • v-enter-active:进入过程中
  • v-enter-to:进入的终点

元素离开的样式

  • v-leave:离开的起点
  • v-leave-active:离开过程中
  • v-leave-to:离开的终点

使用 transition 包裹要过度的元素,并配置其 name 属性

<transition name="hello">
	<h2 v-show="isShow" class="come">你好</h2>
</transition>

如果有多个元素需要过度,则需要使用 transition-group 进行包裹



实例

App.vue

<template>
    <div>
        <MyTest/>
    </div>
</template>

<script>

    import MyTest from "@/components/MyTest";

    export default {
        name: 'App',
        components: {MyTest}
    }
</script>

<style>

</style>

MyTest.vue

<template>
    <div>
        <button @click="isShow = !isShow">显示 / 隐藏</button>
        <transition name="hello" appear>
            <h2 v-show="isShow" class="come">你好</h2>
        </transition>
    </div>
</template>

<script>
    export default {
        name: "MyTest",
        data() {
            return {
                isShow: true
            }
        }
    }
</script>

<style scoped>
    h2 {
        background-color: #a6d49d;
    }

    /*进入的起点和离开的终点*/
    .hello-enter, .hello-leave-to {
        transform: translateX(-100%);
    }

    .hello-enter-active, .hello-leave-active {
        transition: 0.5s linear;
    }

    /*进入的终点和离开的起点*/
    .hello-enter-to, .hello-leave {
        transform: translateX(0);
    }
    
    /*.hello-enter-active {*/
    /*    animation: hello 1s;*/
    /*}*/

    /*.hello-leave-active {*/
    /*    animation: hello 1s reverse;*/
    /*}*/

    /*@keyframes hello {*/
    /*    from {*/
    /*        transform: translateX(-100%);*/
    /*    }*/
    /*    to {*/
    /*        transform: translateX(0);*/
    /*    }*/
    /*}*/
</style>


程序员灯塔
转载请注明原文链接:Vue 封装的过度与动画
喜欢 (0)