jquery - 在包含元素可见之前开始 CSS 动画

Question

我正在制作一个动画，我希望 4 个元素看起来彼此独立 float ，为了实现这一点，我对所有 4 个元素使用相同的动画，但使用 animation-delay 来制作确保它们独立漂浮。这样做的问题是，这些动画发生在页面加载时隐藏的元素内，当该元素变得可见时，您可以看到动画延迟发生。是否可以在包含元素仍处于隐藏状态时开始动画，以便看不到延迟？否则，让它们彼此独立 float 而又不会使 CSS 变得太复杂的最佳方法是什么？

$(function() {
  $('button').click(function(e) {
    e.preventDefault();
    $('.scene.one').hide();
    $('.scene.two').fadeIn(500);
  });
});

.scenes {
  height:150px;
  width:300px;
  border:1px solid black;
}
h1 {
  margin:0;
}
p {
  margin-bottom:0;
  font-size:12px;
}
.scene {
  position:relative;
  height:100%;
  width:100%;
  text-align:center;
  display:none;
}
  .scene-container {
    position:absolute;
    top:50%;
    left:50%;
    transform:translateX(-50%) translateY(-50%);
  }
  .scene.one {
    display:block;
  }
  
.float {
  display:inline-block;
  width:25px;
  height:25px;
  background:black;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
  .animated .float {
    animation-name:floating;
  }
  .float:nth-child(2) {
    animation-delay:.5s;
  }
  .float:nth-child(3) {
    animation-delay:1.5s;
  }
  .float:nth-child(4) {
    animation-delay:1s;
  }

@keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 15px); }
    to   { transform: translate(0, -0px); }    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scenes">
  <div class="scene one">
    <div class="scene-container">
      <h1>WELCOME</h1>
      <button>Next scene</button>
      <p>(Animation delay is still visible even if you wait 2 seconds before clicking)</p>
    </div>
  </div>
  <div class="scene two">
    <div class="scene-container">
      <div class="float-container animated">
        <div class="float"></div>
        <div class="float"></div>
        <div class="float"></div>
        <div class="float"></div>
      </div>
    </div>
  </div>
</div>

Answer 1

您可以使用负延迟来实现此目的。

我使用 calc 设置它们以使逻辑清晰，但您也可以使用计算值。

任何除以动画持续时间的值都会给出相同的提醒，从而保持视觉效果不变

$(function() {
  $('button').click(function(e) {
    e.preventDefault();
    $('.scene.one').hide();
    $('.scene.two').fadeIn(500);
  });
});

.scenes {
  height:150px;
  width:300px;
  border:1px solid black;
}
h1 {
  margin:0;
}
p {
  margin-bottom:0;
  font-size:12px;
}
.scene {
  position:relative;
  height:100%;
  width:100%;
  text-align:center;
  display:none;
}
  .scene-container {
    position:absolute;
    top:50%;
    left:50%;
    transform:translateX(-50%) translateY(-50%);
  }
  .scene.one {
    display:block;
  }
  
.float {
  display:inline-block;
  width:25px;
  height:25px;
  background:black;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
  .animated .float {
    animation-name:floating;
  }
  .float:nth-child(2) {
    animation-delay:calc(.5s - 3s);
  }
  .float:nth-child(3) {
    animation-delay:calc(1.5s - 3s);
  }
  .float:nth-child(4) {
    animation-delay:calc(1s - 3s);
  }

@keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 15px); }
    to   { transform: translate(0, -0px); }    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scenes">
  <div class="scene one">
    <div class="scene-container">
      <h1>WELCOME</h1>
      <button>Next scene</button>
      <p>(Animation delay is still visible even if you wait 2 seconds before clicking)</p>
    </div>
  </div>
  <div class="scene two">
    <div class="scene-container">
      <div class="float-container animated">
        <div class="float"></div>
        <div class="float"></div>
        <div class="float"></div>
        <div class="float"></div>
      </div>
    </div>
  </div>
</div>