animate.css 自定义动画

在使用animate.css 的时候 动画的高度超过了预期的高度

在这种情况下肯定是过不了测试的，怎么办的？

<div class="fold-div animated " :class="{'slideInDown':foldDivHeightShow}"</div>

上边代码可以知道 用的是 slideInDown 动画 看看他源码怎么写的？

slideInDown 源码是这样写的 translate3d(x,y,z) 模仿他搞一个，然后把 y设置成自己想要的

@keyframes slideInDown {from {transform: translate3d(0, -100%, 0);visibility: visible;}to {transform: translate3d(0, 0, 0);}}.slideInDown {animation-name: slideInDown;}

自定义动画;

.slideInDown3 {@keyframes slideInDown3 {from {transform: translate3d(0, -10%, 0);visibility: visible;}to {transform: translate3d(0, 2%, 0);}}animation-name: slideInDown3;}

使用

<div class="fold-div animated " :class="{'slideInDown3':foldDivHeightShow}"</div>

ok,效果很明显