Question

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

我有一个div的列表，我想将它们设置为屏幕上的动画。就像你把它扔到桌子上一样。

所以我的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();

要遍历我的divs并附加类似activeAnim

的类right: 40px; top: 20px;

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

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

是否有任何资源或教程来实现我正在寻找或接近它。

Answer 1

看看：

使用transform translate而不是top / left / right / bottom来提高性能。使用缓动功能。在这些链接中，您可以找到一些有用的缓动函数。

像css中的动画一样投掷卡片

1 个答案: