Question

我想知道是否有办法做到这一点。例如，我有一个像demo on Codepen这样的动画。在500ms之后，下一个立方体将是动画。如何在第一个动画时间的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并减少超时以达到很酷的效果。我为那些想玩它的人准备万能小提琴 - 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);
    });
  });
});

Answer 2

当我得到它时，你想逐个项目顺序启动动画，让每个下一个项目缩短，这样它们就会同时得到目的地。看看这个例子。注意：每个动画不是前一个动画的1/2，但是1 / n更短，其中n是项目数，即对于七个项目，它将是：1000ms - ＆gt; 857 - ＆gt; 714 - ＆gt; 571，否则我认为最新版本太短了。

＆＃13;

$(function() {
  $('button.action').on('click', function() {
    setTimeout(function() {
      var items = $('.wrap .item');
      var total = items.length;
      items.each(function(i) {
        var initial = 1000;
        var delay = initial - initial / (total + 1) * (total - i);
        var speed = initial - initial / (total + 1) * i;
        var item = $(this);
        item.css({
          'transition-delay': delay + 'ms',
          'transition-duration': speed + 'ms',
          'opacity': 1,
          'transform': 'translateX(0)'
        });
      });
    });
  });
});

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

用jquery

2 个答案: