Question

我正在尝试用一些精美的动画制作一个登陆页面。

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

有什么办法可以解决这个问题吗？

这是我的代码，还有link到CodePen：

PUG：

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');
    });
});

Answer 1

一种选择是使用settimeout。此函数触发所有js函数或命令后X毫秒。因此，您只需要计时。同样，这不是最漂亮的方法，但是可以工作。例如：

setTimeout( FunctioName, 2000);

请注意，函数名称不带（）=>仅名称。

Answer 2

您可以添加

overflow: hidden

到CSS中的.content。动画完成后，这将隐藏跨度，直到有足够的空间可供使用。

在其他元素完成动画处理后对某些元素进行动画处理

2 个答案: