1.安装
npm install animate.css
2.使用方法
入口文件App中进行引入 import animate from 'animate.css'
3.多个连续的动画
实现的效果:实现了三个蓝色方块依次以不同效果展现出来。
模板中代码:
样式表:
.box{width:100px;height:80px;background: blue;margin:5px;}
animate.css代码解析:
animation-duration---动画持续时间
animation-delay---动画延迟时间,多个元素,延迟时间要依次累加
animation-iteration-count---动画执行次数
animation-fill-mode:both---设置对象状态为动画结束或开始的状态
ps:还可以写成样式.xxx{animation-duration:2s;animation-delay:4s;animation-fill-mode:both;}
别忘了添加前缀~~
vue项目中引入animate.css和wow.js
本文转自:https://blog.csdn.net/liyunkun888/article/details/85003152 https://www.zhuimengzhu.com/content/ ...
在vue.js 中使用animate.css库
main.js文件引入后,在vue文件里直接添加class animated bounceInUp
vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em,rem的区别
移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...
使用pug(jade),以及在vue+webpack中使用pug(jade)
一:在HTML中使用pug 在css中有预处理器less和scss来使我们的样式表更加的简介,那么在HTML中有没有这样的格式呢,答案是有的,那就是pug(前身是jade),效果如下: 转译以后 好, ...
vue中使用animate.css
一:使用animate.css的使用 1.安装npm install animate.css --save 2.在main.js中引入import animate from 'animate.css' ...
vue中使用animate.css动画库
1.安装: npm install animate.css --save 2.引入及使用: //main.js中 import animated from 'animate.css' Vue.use( ...
在vue中使用animate.css
animate.css是一款前端动画库,相似的有velocity-animate 用法: 首先 npm install animate.css --save 然后在vue文件的script中引入: i ...
048——VUE中使用animate.css动画库控制vue.js过渡效果