javascript - css(display:none)在为何在隐藏后又显示？

Question

$('#abc').addClass('slideout').removeClass('slidein').delay(200).css('display','none');

执行以上语句，slideout 效果显示了，但是 display:none 也执行了，但后又显示了。。。

.slidein .major {
  -webkit-animation: fcl-in 200ms linear;
          animation: fcl-in 200ms linear;
}
.slideout {
  -webkit-animation: slideout-null 200ms;
          animation: slideout-null 200ms;
}
.slideout .major {
  -webkit-animation: fcl-out 200ms linear;
          animation: fcl-out 200ms linear;
}

@keyframes fcl-in {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fcl-out {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes slideout-null {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

Answer 1

解答

在 jQuery 中，.delay() 方法仅适用于队列中的动画效果，而不是对 .css() 这样的非动画效果。当你链式调用 .delay(200).css('display','none'); 时，.delay() 实际上并没有对 .css('display','none') 起作用，因为 .css() 不属于动画队列。

在你的例子中，.addClass('slideout') 触发了动画，但紧接着的 .delay(200) 并没有等待动画完成，而是立即执行了 .css('display','none')。然而，由于 .css('display','none') 是在动画开始后立即设置的，它可能会立即隐藏元素，但这之后，动画可能仍在执行其动画帧（尽管元素已不可见），并且在动画完成后，如果有其他代码（例如动画完成后的回调函数）试图改变元素的显示状态，那么元素可能会再次显示。

解决方案

你可以使用动画的完成回调函数来确保在动画结束后才设置 display: none。但是，因为 .addClass() 不提供直接的回调，你可能需要使用 .animate()（即使你不需要动画效果）或者监听动画结束事件。

以下是一个使用 .animate() 的示例，尽管我们实际上并不改变任何属性，只是利用 .animate() 的回调函数：

$('#abc')
  .addClass('slideout')
  .removeClass('slidein')
  .animate({ opacity: 1 }, { // 使用一个不会改变任何东西的动画
    duration: 200,
    complete: function() {
      // 动画完成后，设置 display: none
      $(this).css('display', 'none');
    }
  });

或者，如果你使用的是 CSS 动画，并且想要监听动画结束事件，你可以这样做：

$('#abc')
  .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
    // 动画结束后，设置 display: none
    $(this).css('display', 'none');
  })
  .addClass('slideout')
  .removeClass('slidein');

在这个例子中，.one() 方法用于绑定一个一次性的事件处理器，它会在 CSS 动画结束时触发，并设置 display: none。注意，这里使用了多个浏览器前缀来确保在所有浏览器中都能正常工作。