当兄弟姐妹被删除时，如何使 HTML div 平滑过渡？答案

【问题标题】：How can I animate HTML divs to transition up smoothly when a sibling is removed?当兄弟姐妹被删除时，如何使 HTML div 平滑过渡？
【发布时间】：2017-10-07 23:22:44
【问题描述】：

我想要达到的目标：

我正在我的页面上制作 CSS/JS 动画。

小提琴 => https://jsfiddle.net/hngz8rq4/

HTML

<div class="container">
  <div class="mock-requests">
    <div class="mock-request">
      <div class="mock-request-inner">
      </div>
      <small>Box 1</small>
    </div>

    <div class="mock-request">
      <div class="mock-request-inner">
      </div>
      <small>Box 2</small>
    </div>

    <div class="mock-request">
      <div class="mock-request-inner">
      </div>
      <small>Box 3</small>      
    </div>

    <div class="mock-request">
      <div class="mock-request-inner">
      </div>
      <small>Box 4</small>      
    </div>

    <div class="mock-request">
      <div class="mock-request-inner">
      </div>
      <small>Box 5</small>
    </div>
  </div>
</div>

var mockRequests;

mockRequests = (function() {
  var animationStep0, animationStep1, animationStep2, callNextStep, init, itemHeight, startTimer, step, timeDelay, timer;
  timer = null;
  step = 0;
  timeDelay = 1600;
  itemHeight = 0;
  init = function() {
    if (document.querySelector('.mock-request')) {
      $(".mock-request").addClass('animated');
      itemHeight = $('.mock-request:first').css('height');
      return startTimer();
    }
  };
  startTimer = function() {
    return timer = setInterval(callNextStep, timeDelay);
  };
  animationStep0 = function() {
    $('.mock-request:first').addClass('checked');
    return step += 1;
  };
  animationStep1 = function() {
    $('.mock-request:first').addClass('zoomOutLeft');
    return step += 1;
  };
  animationStep2 = function() {
    console.log("Setting item height: " + itemHeight);
    $('.mock-request.checked').removeClass('checked zoomOutLeft').remove().css({
      "height": itemHeight
    }).appendTo('.mock-requests').addClass('zoomInBottom');
    return step = 0;
  };
  callNextStep = function() {
    return eval("animationStep" + step + "()");
  };
  return {
    init: init
  };
})();

$(document).on("turbolinks:load", mockRequests.init);

CSS

@charset "UTF-8";
body {
  font-size: 16px;
  color: white;
}
small {
  position: absolute;
  top: 1.8rem;
  left: 1rem;
  font-size: 0.5rem;
}
.mock-request {
  position: relative;
  height: 3rem;
  border-color: white;
  border-width: 3px;
  border-style: solid;
  border-radius: 4px;
  width: 100%;
  max-width: 320px;
  margin: 1rem auto;
}
.mock-request:before {
  position: absolute;
  top: 0.6rem;
  right: 1rem;
  font-size: 1.2rem;
  color: white;
  font-family: "FontAwesome";
  content: "\f10c";
}
.mock-request.checked:before {
  content: "\f058";
}

.mock-request-inner {
  position: absolute;
  top: 1rem;
  left: 1rem;
  height: 0;
  width: 80%;
  border-color: white;
  border-width: 3px;
  border-style: solid;
  border-radius: 4px;
}
.container {
  background-color: black;
}

我要重新创建的效果类似于 iOS 上的滑动删除效果。我希望它看起来像是正在检查堆栈中的一个元素，然后向左滑动以摆脱它。

一旦删除了一个项目，堆栈应该优雅地向上滑动以取代前一个第一个项目。

这个序列应该连续循环。

为了提高效率，我从堆栈中取出第一项并再次将其附加到堆栈底部。

问题：

目前，一旦我从堆栈中删除了顶部元素，其余元素就会跳起来代替之前的兄弟元素。我希望这种过渡缓慢（~0.8 秒）而不是像现在这样立即发生。

谁能提出一个优雅的方式来完成这个序列？

谢谢！

【问题讨论】：

标签： jquery css css-animations animate.css

【解决方案1】：

我一直在看你的有趣问题，我想我有一个答案，你可以在这里看到引用的 jQuery 动画 - http://api.jquery.com/animate/

问题的原因是，根据您的 CSS 位置，在删除该项目之前，它会占用该内容，因此当它被删除时，另一个 div 会自动占用空间。

所以，我能看到的最好方法是修改要删除的 div 的高度。我添加了另一个案例语句来实现这一点。 " 案例2： $( ".mock-song-request:first" ).animate({"height":"0px"},"slow"); 返回步骤 += 1; "

所以，在降低它的高度时，下面的 div 看起来会平滑地向上滚动。在我构建游戏引擎的日子里，“慢”的使用只是我的最爱，但正如 API 文档所述，您可以指定毫秒

不幸的是，jSFiddle 不包含正确版本的 jQuery，无法让该示例显示我的工作示例，但我已经能够让它在本地文件上按预期工作。

【讨论】：