用Vue实现css过渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="./vue.js"></script>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
}
/* 出现阶段的三个函数 */
/* v-enter：时间点： 定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。 */
.v-enter {
opacity: 0;
}
/* v-enter-active: 时间段:在元素显示之前,在过渡/动画完成之后移除 */
.v-enter-active {
transition: all 10s linear;
}
/* 时间段： 。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。 */
.v-enter-to {
opacity: 1;
}
/* 消失阶段的三个函数 */
.v-leave {
opacity: 1;
}
.v-leave-active {
transition: all 5s linear;
}
.v-leave-to {
opacity: 0;
}
/* 自定义过渡类名 */
.show-enter {
opacity: 0;
}
.show-enter-active {
transition: all 3s linear;
}
.show-enter-to {
opacity: 1;
}
/* 消失阶段的三个函数 */
.show-leave {
opacity: 1;
}
.show-leave-active {
transition: all 3s linear;
}
.show-leave-to {
opacity: 0;
}
</style>
</head>
<body>
<div id="app">
<input type="checkbox" v-model="show" /> 显示/隐藏
<hr />
<!--
<transition> 元素作为单个元素/组件的过渡效果。<transition> 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在可被检查的组件层级中。
-->
<transition>
<div class="box" v-show="show"></div>
</transition>
<!--
为了区分多个过渡类名,自定义过渡类名
-->
<br />
<br />
<transition name="show">
<div class="box" v-show="show"></div>
</transition>
</div>
<script>
// vue 动画
// 1. css 内置的过渡类名实现动画； v-enter-* 和 v-leave-*;
// 2. css 自定义过渡类名实现动画
let vm = new Vue({
el: "#app",
data: {
show: true,
},
});
</script>
</body>
</html>
效果如下
浙公网安备 33010602011771号