前言
- 之前使用animate.css直接套到类名上进行制作动画，现在发现和别的竞品比动画这块有些差距。于是对动画重构。
- 实际上也是玩配置，但是首先要一个元素可以支持多个动画。而支持多个动画也很简单，只要animate里按逗号分割即可。但是还是需要梳理下动画的几个属性，再将属性变成常人易于理解的文字与操作。
动画属性
- animation-name
这个是动画的动画名，逗号分割多的没啥说，对应名称 - 类型in - out
这个很多会有进入动画或者退出动画，实际就是给动画分类，都是forwards。 - animation-duration
持续时间，越长越久。 - animation-delay
延迟，一开始觉得没啥用，后来发现多个动画时就非常有用，特别适合做贺卡那种，a动完再b动。 - animation-iteration-count
重复次数 ， 如果是类似贺卡的一般是1，否则用的多的就是无限。 - animation-timing-function
贝塞尔曲线的运动函数，可以配置常见默认的几个。 - animation-play-state
如果需要做timeline，那么这个就是pause，修改delay可以看当时的图像状态。正常情况是running。
配置项
- 正常来说先升级不做timeline，那玩意需要先整个组件，查了下网上可以用的组件效果都不怎么好，还是得靠自己手写。
- 不做timeline的话就是name，duration , delay , count , timingfuction , 5个属性进行配置。设好默认值即可。
- 类型in与out需要使用弹窗之类更好的让用户去选择。
|