一般情况,在vue中使用动画,如果只是简单的动画,那么可以直接在animate.css上面找到需要的效果,查看其css文件,将其对应的类拷贝到css中,然后再应用到需要显示动画效果的元素上就可以了。
animate.css官网:添加链接描述
Example:
在vue中给元素添加一个向上滑动的动画
1、在animate中找到slideInUp相关的类,如下:
@keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
}
将其拷贝到css文件中
2、自己再增加css样式
.animated{
animation: slideInUp 2s;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
3、给元素使用就自动有动画了
<div class="animated">向上滑动</div>