Vue.js——过渡&动画效果demo
基本格式
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, .fade-leave{
opacity:0;
}
.fade-enter-active, .fade-leave-active{
transition:opacity 4s;
}
.fade-enter-to, .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>
运行效果