动画1——使用过渡类名
2019-04-18 本文已影响0人
小丘啦啦啦
一、动画主要作用
提高用户体验，帮助用户更好的理解页面功能。
二、过渡的类名
进入/离开的过渡中，有6个class切换。
- .v-enter，动画进入之前元素的初始状态。
- .v-enter-to，动画进入后元素的结束状态。
- .v-enter-active，动画进入到结束的时间段，入场动画时间段。
- .v-leave，动画离开之前的元素状态。
- .v-leave-to，动画离开之后的元素状态。
- .v-leave-active，动画离开起始到结束的时间段，离场动画时间段。
总共分成了两个半场动画。
三、使用过渡类名实现动画
1、使用 transition（vue官方提供）元素把需要动画控制的元素内容包裹起来。
2、设置过渡类的样式。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<style>
.v-enter,.v-leave-to{ /* 动画进入前和离开后的元素状态 */
opacity:0;
transform: translate(100px);
}
.v-enter-active, /* 入场和离场动画时间段 */
.v-leave-active{
/* 设置时间,那些元素实现动画变化等的过渡 */
transition : all 0.4s ease;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="转化" @click="flag = !flag"/>
<transition>
<h3 v-if="flag">我是一句话</h3>
</transition>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
flag:false,
}
});
</script>
</body>
</html>
