javascript - 使用 jquery 错开 css 动画

Question

请问有没有什么办法。例如我有一个这样的动画 demo on Codepen . 500 毫秒后，下一个立方体将具有动画效果。如何在第一个动画时间的 1/2 后让下一个立方体动画。我知道如何使用 .animate() 来实现它，但这次是 .css() 并且我找不到实现它的方法。我很感激!

$(function() {
  $('button.action').on('click', function() {
    $('.wrap .item').each(function(i) {
      var $item = $(this);
      setTimeout(function() {
        $item.css({
          'opacity': 1,
          'transform': 'translateX(0)'
        });
      }, 500*i);
    });
  });
});

下一个动画将从第一个动画时间的 1/2 开始。不是在第一个的末尾。

Answer 1

正如@disstruct 所建议的那样，您可以更改 CSS 并减少超时以达到炫酷的效果。我为任何想玩它的人准备了万能 fiddle - https://jsfiddle.net/skyr9999/rvknhq1m/

这是 html:

<div class="wrap">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<button class="action">Action!</button>

和 CSS:

.item {
  display: block;
  margin: 5px;
  width: 60px;
  height: 60px;
  background-color: #cd3455;
  transform: translateX(100px);
  opacity: 0.5;
  transition: all 1s cubic-bezier(.49,-0.57,1,.99)
}
.action {
  position: absolute;
  top: 5%;
  right: 5%;
}

和JS:

$(function() {
  $('button.action').on('click', function() {
  var duration = 250; //reduce it to have cool effects
    $('.wrap .item').each(function(i) {
      var $item = $(this);
      setTimeout(function() {
        $item.css({
          'opacity': 1,
          'transform': 'translateX(0)'
        });
      }, duration*i);
    });
  });
});