在 Chrome 中，可见性变化的元素上的 CSS3 动画仅在隐藏时播放答案

【问题标题】：In Chrome, CSS3 animation on element with changing visibility gets played only when hidden在 Chrome 中，可见性变化的元素上的 CSS3 动画仅在隐藏时播放
【发布时间】：2015-10-18 22:38:17
【问题描述】：

看到这个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 错误吗？有没有人有办法解决吗？

谢谢！ E

【问题讨论】：

标签： css google-chrome css-animations

【解决方案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();
  });

});

【讨论】：

谢谢。但这不是我想要展示的。 Toggle 切换显示属性。不是能见度的。这个想法是让这个元素淡入淡出，这样看起来更令人赏心悦目。