【css】dooringx-lib动画升级梳理

前言

• 之前使用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需要使用弹窗之类更好的让用户去选择。