-
Vue默认动画样式
-
引用第三方库
-
transition-group实现v-for列表渲染
实例效果:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../../js/Vue.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="animate.css"/>
<style>
.v-enter,.v-leave-to{
opacity: 0;
transform: translateX(100px);
}
.v-enter-active,.v-leave-active{
transition: all 1s ease;
}
/*自加前缀name*/
.my-enter,.my-leave-to{
opacity: 0;
transform: translateY(100px);
}
.my-enter-active,.my-leave-active{
transition: all 1s ease;
}
ul{
list-style-type: none;
}
li{
border: 1px dotted gray;
line-height: 35px;
font-size: 20px;
margin: 15px 0px;
width: 100%;
color: red;
}
li:hover{
background-color: hotpink;
}
/*li标签渐变离场效果*/
/*记住该写法*/
.v-move{
transition: all 1s;
}
.v-leave-active{
position: absolute;
}
</style>
</head>
<body>
<div id="app">
<!--默认v-绑定动画样式-->
<input type="button" @click="flag=!flag" value="切换"/>
<transition>
<h3 v-if="flag">动画效果显示文字</h3>
</transition>
<hr />
<!--自定义name的动画样式-->
<input type="button" @click="flag2=!flag2" value="切换2"/>
<transition name="my">
<h3 v-if="flag2">动画效果2</h3>
</transition>
<hr />
<!--第三方库动画样式-->
<input type="button" @click="flag3=!flag3" value="切换3"/>
<transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
<h3 v-if="flag3">动画效果2</h3>
</transition>
<hr />
<!--注意,v-foe渲染标签元素的时候不能使用template,要使用transition-group-->
<label for="id">输入id:</label>
<input id="id" v-model="id" />
<label for="name">输入name:</label>
<input id="name" v-model="name" />
<input type="button" @click="addButton" value="添加item" />
<ul>
<!--普通的入场效果appear-->
<transition-group appear>
<li v-for="(item,i) in groupArr" :key="item.id" @click="del(i)" >{{item.name}}</li>
</transition-group>
</ul>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
flag:false,
flag2:false,
flag3:false,
id:"",
name:"",
groupArr:[
{ id :1 ,name:"chen"},
{ id :2 ,name:"zhang"},
{ id :3 ,name:"cwh"},
]
},
methods:{
addButton:function(){
if(this.id!=""&&this.name!=""){
this.groupArr.push({id:this.id,name:this.name});
this.id=this.name="";
}
},
del:function(i){
this.groupArr.splice(i,1);
},
}
});
</script>
</body>
</html>
-
使用Vue动画钩子函数实现半场动画
实例效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../../js/Vue.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="animate.css"/>
<style>
.cycle{
width: 20px;;
height: 20px;
border-radius: 50%;
background: red;
}
</style>
</head>
<body>
<div id="app">
<input type="button" @click="flag=!flag" value="快到碗里来" />
<!--动画-->
<transition @before-enter="beforeEnter" @enter="Enter" @after-enter="afterEnter">
<div v-show="flag" class="cycle"></div>
</transition>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
flag:false
},
//动画钩子函数,第一个参数:要执行动画效果的DOM对象。
methods:{
beforeEnter:function(el){
// el.style.opacity="1"
el.style.transform="translate(40px,20px)";
},
Enter:function(el,done){
el.offsetWidth;//必要!???、、、
el.style.transition="all 1s";
el.style.transform="translate(400px,400px)";
done();//done函数表示afterEnter函数,即立即引用下面函数,没有延迟
},
afterEnter:function(el){
// el.style.opacity="0";.
this.flag=!this.flag;//让动画完成后的小球隐藏
}
}
});
</script>
</body>
</html>