在使用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,效果很明显
