基本流程 使用<transition>对要执行动画的标签内容进行包裹。 如果你使用css动画，则该标签应当具有name属性，可以使用name-时机进行链接书写css类。 如果你使用anim
基本流程
原生CSS
| 时机 |
描述 |
| 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 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
| 属性 |
描述 |
| enter-active-class |
开始的动画类 |
| leave-active-class |
结束的动画类 |
<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",}
})
</script>
</body>
服务热线 19970861797
