对vue 动画的理解
- 操作 css 的 trasition 或 animation (即不生产，只是搬运工)
- vue 会给目标元素添加/移除特定的 class
- 过渡的相关类名
xxx-enter-active: 指定显示的 transition
xxx-leave-active: 指定隐藏的 transition
xxx-enter/xxx-leave-to: 指定隐藏时的样式
实现方式（两种）
> 1) 在目标元素外包裹<transition name="xxx">
> 2) 定义 class 样式 指定过渡样式: transition
> 注意 .xxx-enter-active , .xxx-leave-active
.xxx-enter , .xxx-leave-to
中xxx和 “name”属性是一致的
> 指定隐藏时的样式:
none 没有属性会获得过渡效果。
all 【默认值】所有属性都将获得过渡效果。
property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔，比如： width,height，opacity/其它
比如： transition: width 3s; 只让宽度产生动画过渡效果，其它属性不产生效果。
第一种
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤&动画</title>
<style>
/*显示/隐藏的过渡效果*/
.xxx-enter-active , .xxx-leave-active{
transition: opacity .5s; <!--opacity:不透明 (定义过渡时间)-->
}
/*隐藏时的样式*/
.xxx-enter , .xxx-leave-to{
opacity: 0;
}
/*显示的过渡效果*/
.move-enter-active{
transition: all 1s ; <!--持续时间-->
}
/*隐藏的过渡效果*/
.move-leave-active{
transition: all 3s; <!--all【默认值】所有属性都将获得过渡效果 -->
}
/*隐藏时的样式*/
.move-enter,.move-leave-to{
opacity: 0;
transform: translateX(20px); <!--正值表示向右移-->
}
</style>
</head>
<body>
<div id="test1">
<button @click="isShow=!isShow" >toggle</button>
<transition name="xxx">
<p v-show="isShow">hello</p>
</transition>
</div>
<div id="test2">
<button @click="isShow=!isShow" >toggle</button>
<transition name="move">
<p v-show="isShow">hello</p>
</transition>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#test1',
data(){
return {
isShow:true
}
}
})
new Vue({
el:'#test2',
data(){
return {
isShow:true
}
}
})
</script>
</body>
</html>
第二种
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤&动画</title>
<style>
.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<div id="test2">
<button @click="show = !show">Toggle show</button>
<br>
<transition name="bounce">
<p v-if="show" style="display: inline-block">Look at me!</p>
</transition>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
new Vue({
el: '#test2',
data: {
show: true
}
})
</script>
</body>
</html>
