摘星小筑

Vue 动画渲染

基本流程

　　 使用<transition>对要执行动画的标签内容进行包裹。

　　 如果你使用css动画，则该标签应当具有name属性，可以使用name-时机进行链接书写css类。

　　 如果你使用animate.css等第三方动画效果库，则可直接添加动画属性即可。

原生CSS

　　 下面是css类，v对应<transition>的name属性。

时机描述
v-enter 定义进入过渡的开始状态
v-enter-to 定义进入过渡生效时的状态
v-active 定义进入过渡的结束状态
v-leave 定义离开过渡的开始状态
v-leave-active 定义离开过渡生效时的状态
v-leave-to 定义离开过渡的结束状态

　　

　　 vuecss动画

<style>
    .show-enter,.show-leave-to{
        transition: all 2s;
        opacity: 0;
    }
    .show-enter-active,.show-leave{
        transition: all 2s;
    }
</style>

<body>

<div id="app">
    <p><button type="button" @click="status = !status">切换</button></p>
    <transition name="show" >
        <img v-if="status" src="./bcakground.jpg" alt="">
    </transition>
</div>

<script src="./vue.js"></script>
</script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            status: false,
        }
    })
</script>
</body>

第三方库animate

　　 使用第三方库animate，指定动画类即可

　　 animate.css官网

属性描述
enter-active-class 开始的动画类
leave-active-class 结束的动画类

　　 vuecss第三方库动画

<link rel="stylesheet" href="./animate.css/animate.css">
<body>

<div id="app">
    <p><button type="button" @click="status = !status">切换</button></p>
    <transition name="show" enter-active-class="animate__animated  animate__bounce" leave-active-class="animate__animated animate__wobble">
        <img v-if="status" src="./bcakground.jpg" alt="">
    </transition>
</div>

<script src="./vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            status: false,
        }
    })
</script>
</body>
posted @ 2020-11-21 15:07  云崖先生  阅读(261)  评论(0)    收藏  举报