操作元素时有个过渡或动画的效果(渐变和移动的效果和放大缩小的效果)
过渡:trasition
动画:animation
1.vue动画的理解
1)操作css的trasition或animation(它本身不是传动画)
2)vue会给目标添加/移除特定的class
3)过渡相关的类名
xxx-enter-active:制定显示的transition
xxx-leave-acttive:指定隐藏的transition
xxx-enter/xxx-leave-to:指定隐藏式的样式
1.test014(1).html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*显示/隐藏时的过渡效果*/
.xxx-enter-active,.xxx-leave-active{
transition: opacity 1s;
}
/*隐藏时的样式*/
.xxx-enter,.xxx-leave-to{
opacity: 0;
}
/*显示时的过渡效果*/
/*改变多个时写all,然后再指定*/
.move-enter-active{
transition: all 1s;
}
/*隐藏时的过渡效果*/
.move-leave-active{
transition: all 3s;
}
/*隐藏时的样式*/
.move-enter,.move-leave-to{
opacity: 0;
/*在水平方向移动,向右边移动,所以是正值20px*/
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>
2.test014(2).html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*进入过程动画*/
.bounce-enter-active{
animation: bounce-in .5s;
}
/*离开过程动画*/
.bouce-leave-active{
/*reverse反过来*/
animation: bounce-in .5s reverse;
}
/*具体使用哪个animation*/
@keyframes bounce-in {
/*x%为时间;scale(1.5),1.5为放大1.5倍;*/
0%{
transform:scale(0);
}
50%{
transform:scale(1.5);
}
100%{
transform:scale(1);
}
}
</style>
</head>
<body>
<div id="example-2">
<button @click="show=!show">Toggle show</button>
<br>
<transition name="bounce">
<!--display: inline-block不加这个会占一整行,加了就会缩小至当前文字-->
<p v-if="show" style="background: red;display: inline-block">吾乃常山赵子龙也!!!</p>
</transition>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#example-2',
data:{
show:true
}
})
</script>
</body>
</html>
3.总结:
基本过渡动画的编码步骤:
1)在目标元素外包裹<transition name="xxx">
2)定义class样式
指定过渡样式transition
指定隐藏时样式:opacity/其他