上一节说的是Vue的过渡动画 ，这一节学习下keyframes动画。
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./vue.js"></script>
<style>
@keyframes bounce-in{
0%{
transform: scale(0);
}
50%{
transform: scale(1.5);
}
100%{
transform: scale(1);
}
}
.fade-enter-active{
transform-origin: left center;
animation: bounce-in 1s;
}
.fade-leave-active{
transform-origin: left center;
animation: bounce-in 1s reverse;
}
</style>
</head>
<body>
<div id="root">
<transition name='fade'>
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
var vm = new Vue({
el:"#root",
data:{
show:true
},
methods:{
handleClick:function(){
this.show = !this.show
}
}
})
</script>
</body>
上式代码中，在style中定义了keyframes动画，名字是bounce-in，大括号里面的内容是各个阶段，字体所改变的大小。
定义完之后，在'.fade-enter-active'和'.fade-leave-active'中就可以使用了：animation后面加上keyframes的名字bounce-in,再写上执行完所需的时间，还得再加上transfor-origin，不然演示动画的时候可能会有问题。'.fade-leave-active'也一样，如果我想让离开的动画反向执行，我在animation后面加上reverse。
上面就是keyframes的C3动画。
有个小知识点：style标签中定义的‘.fade-enter-active’和‘.fade-leave-active’这两个名字是可以用自己定义的名字来代替的，不过还是得在transition中定义一下：
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./vue.js"></script>
<style>
@keyframes bounce-in{
0%{
transform: scale(0);
}
50%{
transform: scale(1.5);
}
100%{
transform: scale(1);
}
}
.active{
transform-origin: left center;
animation: bounce-in 1s;
}
.leave{
transform-origin: left center;
animation: bounce-in 1s reverse;
}
</style>
</head>
<body>
<div id="root">
<transition name='fade'
enter-active-class="active"
leave-active-class="leave"
>
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
var vm = new Vue({
el:"#root",
data:{
show:true
},
methods:{
handleClick:function(){
this.show = !this.show
}
}
})
</script>
</body>
我在body中的transition标签中定义了‘enter-active-class’和‘leave-active-class’的自定义的名字分别为‘active’和‘leave’，这样就可以在上面的style标签中使用‘active’和‘leave’这两个名字了。
现在介绍下animate.css库，这个库其实就是keyframes封装而来的。
从网上下载好之后，用链接链接到代码中就可以使用了。
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./vue.js"></script>
<link rel="stylesheet" type="text/css" href="./animate.css">
</head>
<body>
<div id="root">
<transition name='fade'
enter-active-class="animated swing"
leave-active-class="animated shake"
>
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">toggle</button>
</div>
<script>
var vm = new Vue({
el:"#root",
data:{
show:true
},
methods:{
handleClick:function(){
this.show = !this.show
}
}
})
</script>
</body>
用animate.css库之后，就不用自己写动画了，直接链接这个库，然后在内容上使用这个库就可以了。
在用的时候，需要注意几点：
1、必须要使用自定义形式的class：“enter-active-class”、“leave-active-class”；
2、自定义形式的class，等号后面必须加一个“animated”这个具体的类，然后添加所需要的动画效果，例子中添加的是swing和shake,
网友评论