Vue 过渡与动画除了支持 淡入淡出,还可以实现位移的效果。
<!DOCTYPE html>
<html>
<head>
<title>Vue 过渡及动画</title>
<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<style type="text/css">
/*v-enter [这是一个时间点] 是进入之前,元素的起始状态,此时还没有开始进入*/
/*v-leave-to [这是一个时间点] 是动画离开之后,离开的终止状态,此时元素动画已经结束*/
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(150px);
}
/*v-enter-active [入场动画的时间段]*/
/*v-leave-active [离场动画的时间段]*/
.v-enter-active,
.v-leave-active {
transition: all 0.4s ease;
}
</style>
<body>
<div id="app">
<input type="button" value="toggle" @click="flag=!flag">
<transition>
<h3 v-if="flag">嗨客网</h3>
</transition>
<p>嗨客网(www.haicoder.net)</p>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el :'#app',
data:{
flag: true
}
})
</script>
</html>
浏览器运行效果如下图所示:
这里我们定义了一个位移动画。
Vue 过渡与动画除了支持淡入淡出,还可以实现位移的效果。