Vue 动画渲染

  • Z时代
  • 2024-01-10
  • 分类：综合

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定义离开过渡的结束状态

　　 

<style>
    .show-enter,.show-leave-to{
        transition: all 2s;
        opacity: 0;
    }
    .show-enter-active,.show-leave{
        transition: all 2s;
    }
</style>
<body>
<div >
    <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结束的动画类

　　 

<link rel="stylesheet" href="./animate.css/animate.css">
<body>
<div >
    <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>

以上是 Vue 动画渲染 的全部内容， 来源链接： utcz.com/z/374860.html

回到顶部