javascript - 在动画开始前隐藏一个 div

Question

我正在使用 link 中的现有主题在重新加载页面时，您确实会看到一些 div 元素在页面动画实际开始之前就可见了。

在 style.css 下，我们确实看到他们试图在动画开始前防止闪烁:

-webkit-animation-fill-mode: both;
animation-fill-mode: both;

这并没有真正解决问题。有没有办法解决在动画开始之前提前显示 div 元素的问题？

更新:

@-webkit-keyframes fadeOut {
  0% {
    opacity:0;
    width:0;
  }
  1% {
    opacity:1;
  }
  100% {
    opacity:1;
    width:100px;
  }
}

@keyframes fadeOut {
  0% {
    opacity:0;
    width:0;
  }
  1% {
    opacity:1;
  }
  100% {
    opacity:1;
    width:100px;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

我发现问题发生在 Chrome 和移动设备上。

$(document).ready(function() {
   $('div#tp-caption').hide('slow');
});

这适用于 safari 和 firefox，但不适用于 chrome。

Answer 1

试一试:-

@keyframes slidein {
  0% {
    opacity:0;
    width:0;
  }
  1% {
    opacity:1;
  }
  100% {
    opacity:1;
    width:100px;
  }
}