javascript - css中类似 throw 卡片的动画

Question

这很难解释，但我想要实现的动画是......

我有一个 div 列表，我想将它们动画显示到屏幕上。就像您将它们扔到 table 上一样。

所以我的html:

  <ul class="content_anim_1__container_items">
    <li class="content_anim_1__image-item1"></li>
    <li class="content_anim_1__image-item2"></li>
    <li class="content_anim_1__image-item3"></li>
    <li class="content_anim_1__image-item4"></li>
    <li class="content_anim_1__image-item5"></li>
    <li class="content_anim_1__image-item6"></li>
    <li class="content_anim_1__image-item7"></li>
    <li class="content_anim_1__image-item8"></li>
    <li class="content_anim_1__image-item9"></li>
  </ul>

所有li标签都是position:absolute和right:-500px然后在我的JS中我这样做:

function activeAnim() {
  for(var x=0; x < $(".content_anim_1__container_items li").length; x++) {
    $(".content_anim_1__image-item1").addClass("activeAnim1");
    $(".content_anim_1__image-item2").addClass("activeAnim2");
    $(".content_anim_1__image-item3").addClass("activeAnim3");
    $(".content_anim_1__image-item4").addClass("activeAnim4");
    $(".content_anim_1__image-item5").addClass("activeAnim5");
    $(".content_anim_1__image-item6").addClass("activeAnim6");
    $(".content_anim_1__image-item7").addClass("activeAnim7");
    $(".content_anim_1__image-item8").addClass("activeAnim8");
    $(".content_anim_1__image-item9").addClass("activeAnim9");
  }
}


activeAnim();

循环遍历我的 div 并附加类 activeAnim ，其内容类似于 right: 40px;顶部:20px；

我的问题是感觉不够流畅。

我正在阅读动画，发现一篇文章基本上解释了我不应该使用 left 和 right 来制作动画，而是使用 transform:translate3d() 链接 - https://www.kirupa.com/html5/animating_movement_smoothly_using_css.htm

是否有任何资源或教程可以实现我正在寻找或接近的目标。

Answer 1

看一下:

• Material design - Duration & easing

• Material design - Movement

使用变换平移而不是上/左/右/下来提高性能。使用缓动功能。在这些链接中，您可能会发现一些有用的缓动功能。