在使用animate.css 的時候 動畫的高度超過了預期的高度css
在這種狀況下確定是過不了測試的,怎麼辦的?markdown
<div class="fold-div animated " :class="{'slideInDown':foldDivHeightShow}"
</div>
複製代碼
上邊代碼能夠知道 用的是 slideInDown 動畫 看看他源碼怎麼寫的?ide
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;
}
複製代碼
使用spa
<div class="fold-div animated " :class="{'slideInDown3':foldDivHeightShow}"
</div>
複製代碼
ok,效果很明顯3d