基本格式
HTML部分
<transition name='name'>
<div></div>
</transition>
样式部分
Vue.js提供了6个class来实现过渡效果
1.进入类
v-enter 进入过渡的开始状态
v-enter-active 进入过渡的激活状态
v-enter-to 进入过渡的结束状态
2.离开类
v-leave 离开过渡的开始状态
v-leave-active 离开过渡的激活状态
v-leave-to 离开过渡的结束状态
注：类选择器中v是指transition中的name属性的值
图片淡出demo
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<script src="vue.js"></script>
<style>
*{
font-family: 微软雅黑;
padding:0px;
margin:0px;
}
//设置过渡进入激活和离开激活的动画效果
.fade-enter-active, .fade-leave-active{
transition:opacity 4s;
}
//设置动画进入时透明度为0，即4s的时间透明度从0到1
.fade-enter{
opacity:0;
}
//设置动画的离开时透明度，即4秒的时间透明度从1到0
.fade-leave-to{
opacity:0;
}
.img{
width:320px;
height:168px;
position:absolute;
top:50%;
left:50%;
margin-left:-160px;
margin-top:-84px;
box-shadow:0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.img img{
display:block;
width:320px;
height:168px;
}
.img:hover{
cursor:pointer;
}
</style>
</head>
<body>
<div id="app">
<transition name="fade">
<div class="img" v-if="show" @click="show = !show">
<img src="test.png" alt="">
</div>
</transition>
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data:{
show:true
},
methods:{
}
});
</script>
</html>
运行效果
vue的过渡效果还可以结合第三方的库实现更多的效果
vue提供了6个专门用于设置过渡效果的class选择器名
<transition
before-enter-class=''
enter-class=''
after-enter-class=''
before-leave-class=''
leave-class=''
after-leave-class=''
>
</transtition>
PS：可以结合animate.css实现更多的过渡效果
vue 过渡的指令来实现过渡过程事件的监听
<transition
@before-enter=''
@enter=''
@after-enter=''
@before-leave=''
@leave=''
@after-leave=''
>
</transtion>
