Question

请参阅此Plunkr：

假设加载页面时可以看到动画（CSS3）元素。当您切换它的可见性（可见/隐藏）时，动画将停止播放。如果你密切注意，你会发现它在隐藏元素时实际播放，并在可见时停止播放。

如果在加载页面时将元素设置为visibility:hidden，然后切换为可见，则此问题就会消失。

这是我用于切换类的简单jquery代码

$(function(){
  $("body").click(function(){
    if($(".busy-content").hasClass("on")){
      $(".busy-content").removeClass("on");
    }else{
      $(".busy-content").addClass("on");
    }
  });
});

这是CSS（从另一个应用程序复制）：

.busy-content{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background:rgba(255,255,255,0.7);
  visibility:hidden;
  opacity:0;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}

.busy-content.on{
  visibility:visible;
  opacity:1;
}

这是一种非常奇怪的行为，在IE / Edge / FF中不会重复。这是Chrome错误吗？有没有人有办法解决吗？

谢谢！ ë

Answer 1

我认为您可以使用.toggle()。这是更新的fiddle，它正在使用chrome。

jQuery代码

$(function(){
  $("body").click(function(){
    //if($(".busy-content").hasClass("on")){
      //$(".busy-content").removeClass("on");
    //}else{
     // $(".busy-content").addClass("on");
    //}
    $(".busy-content").toggle();
  });

});

在Chrome中，仅在隐藏时才会播放具有可见性变化的元素上的CSS3动画

1 个答案: