Question

我想要实现的目标：

我正在我的页面上处理CSS / JS动画。

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>

JS

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.8s），而不是立即发生，正如现在所做的那样。

有人能建议一种优雅的方式来完成这个序列吗？

谢谢！

Answer 1

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

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

所以，我能看到的最好的方法是修改被删除的div的高度。我添加了另一个案例陈述来实现这一点。 “ 案例2： $（“.mock-song-request：first”）。animate（{“height”：“0px”}，“slow”）; 返回步骤+ = 1; “

因此，在降低高度时，下面的div似乎会顺利向上滚动。在我的游戏引擎构建日期，使用“慢”只是我的最爱，但正如API文档所述，您可以指定毫秒

不幸的是，jSFiddle没有包含正确版本的jQuery让这个例子显示我的工作示例，但我能够让它在本地文件上按预期工作。

当移除兄弟时，如何动画HTML div来平滑过渡？

1 个答案: