1. 如何vue中使用keyframe动画
举个例子:
效果:
隐藏的时候,有放大缩小的效果,
显示的时候也有放大缩小的效果。
2. 如何自定义动画样式?
看下图操作即可:
既然可以自定义vue的动画样式,那同理就可以使用vue的animate.css库
3.如何使用animate.css库动画
动画首页网址:
4.如何解决新页面无动画问题
刚才的动画中,刷新页面后,初始动画是没有的,如何设置初始动画呢?
5.animate.css和transition动画组合如何使用?
animate.css本质上是使用的@keyframe这种动画,上一篇文章是transition动画,如何组合使用呢?
如下图所示,就有有过渡显示,并且带animate.css样式特效。
6.小问题: animited.css和transition时长哪个为准?
animited样式的时长看源码会看到默认是1s,transition的时长我们设置的是3s,以哪个为准呢?
解决方式1: type
解决方式2: :duration 自定义设置动画时长
也可以更详细的设置: