在使用animate.css 的時(shí)候 動(dòng)畫(huà)的高度超過(guò)了預(yù)期的高度

在這里插入圖片描述

在這種情況下肯定是過(guò)不了測(cè)試的，怎么辦的？

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

上邊代碼可以知道 用的是 slideInDown 動(dòng)畫(huà) 看看他源碼怎么寫(xiě)的？

在這里插入圖片描述

slideInDown 源碼是這樣寫(xiě)的 translate3d(x,y,z) 模仿他搞一個(gè)，然后把 y設(shè)置成自己想要的

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

  to {
    transform: translate3d(0, 0, 0);
  }
}

.slideInDown {
  animation-name: slideInDown;
}

自定義動(dòng)畫(huà);

.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,效果很明顯