animation完成一个动画效果
代码基本结构搭建
使用与过渡动画相同的代码结构
var vm = new Vue({
el:'#root',
data:{
show:true
},
methods:{
handleClick:function(){
this.show = ! this.show
}
}
})
复制代码
添加CSS动画效果
我们想要完成一个动态效果，使得页面的div显示与消失时，在一定的时间内文字的大小不一样的一个动画
@keyframes关键帧
使用@keyframes关键帧来表示不同时期的样式规则
语法：
@keyframes 动画名称{
百分比{
样式规则；
}
}
复制代码
给上述代码中添加@keyframes动画效果
@keyframes bounce-in{
0%{
transform: scale(0);
}
50%{
transform: scale(1.5);
}
100%{
transform: scale(1);
}
}
复制代码
我们添加了一个名叫bounce-in的动画效果，在不同的时间段展示的盒子大小比例不同
设置动画加载时的CSS样式
有了过渡动画的基础，我们可以知道fade-enter-active和fade-leave-active在动画加载的全程都会存在，所以我们对这两个类进行样式设置
.fade-enter-active{
transform-origin: left center;
animation: bounce-in 1s;
}
.fade-leave-active{
transform-origin: left center;
animation: bounce-in 1s reverse;
}
复制代码
我们通过animation来调用前面编写的bounce-in动画，令他持续的时间为1s。在盒子消失时，使用reverse对动画效果进行翻转，使得显示和消失效果对称
注意： transform-origin这个属性设置盒子变换的基准点，针对不同的效果需要设置不同的基准点
自定义类名
当使用transitiion标签时，vue会产生默认的类名，但我们也可以进行自定义
语法：
我们在transition标签上添加对应的更改类名的属性
复制代码
再对CSS样式中的类名进行修改即可
添加动画后完整代码
@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;
}
复制代码
var vm = new Vue({
el:'#root',
data:{
show:true
},
methods:{
handleClick:function(){
this.show = ! this.show
}
}
})
复制代码
animate.css库
animate.css库为我们提供了动画效果的封装，我们在代码中引入这个css库，即可简单的完成所需的动画效果，而不用自己编写动画部分的代码
引用
在
标签内引用css库，href内填写animate.css库的存储位置
复制代码
使用
在使用animate.css库的时候首先需要对class名进行重新自定义，自定义的名称为animated+空格+对应的效果名
hello world
复制代码在使用时必须使用自定义类名的方式
animate.css库中的动画效果名称可以去官网查看
使用该库后可以省略CSS样式部分的代码
使用animate.css库完整代码
var vm = new Vue({
el:'#root',
data:{
show:true
},
methods:{
handleClick:function(){
this.show = ! this.show
}
}
})
复制代码
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
