animate css组合,Vue---CSS动画之animate.css库

animation完成一个动画效果

代码基本结构搭建

使用与过渡动画相同的代码结构

hello world

change

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;

}

复制代码

hello world

change

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库完整代码

hello world

change

var vm = new Vue({

el:'#root',

data:{

show:true

},

methods:{

handleClick:function(){

this.show = ! this.show

}

}

})

复制代码