在其他元素完成动画后动画某些元素

Posted 2023-03-07

【中文标题】在其他元素完成动画后动画某些元素

【英文标题】：Animating certain elements after others have finished their animation

【发布时间】：2019-04-29 15:11:55

【问题描述】：

我正在尝试构建一个带有一些简洁动画的登录页面。

我希望我的 span 元素仅在我的 content div 完成动画后显示。

知道如何解决这个问题吗？

这是我的代码和 CodePen 的 link：

帕格：

div.landing-page
  div.content
    span J
    span H
  input(type='button' id='button' value='click')

SASS：

html
  background: gray
  .landing-page
    .content
      width: 200px
      height: 2px
      background: black
      position: absolute
      left: 50%
      top: 50%
      transform: translate(-50%,-50%)
      animation: fade 2s cubic-bezier(0.165, 0.84, 0.44, 1) forwards
      span
        color: white
    .animated
      animation: grow 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards
    input#button
      position: absolute
      left: 50%
      top: 48%
      transform: translate(-50%,-50%)

@keyframes fade
  0%
    opacity: 0
  100%
    opacity: 1
@keyframes grow
  0%
    width: 0%
  70%
    width: 100%
    height: 2px
  100%
    width: 100%
    height: 100%

jQuery:

$(document).ready(function() 
    $('#button').click(function() 
        $(this).remove();
        $('.content').addClass('animated');
    );
);

【参考方案1】：

你可以添加

overflow: hidden

到 css 中的 .content。在动画完成后，这将隐藏跨度，直到有足够的空间。

【讨论】：

谢谢先生！这是一个非常优雅的解决方案。抱歉回复晚了。

【参考方案2】：

一种选择是使用settimeout。该函数在 X 毫秒后触发任何 js 函数或命令。所以你只需要计时。同样，这不是最美丽的方式，但会奏效。例如：

setTimeout( FunctioName, 2000);

请注意没有 () => 的函数名称只有名称。