时间戳

首页 > 解决方案 > zoomIn 效果（Animate.css）在元素消失和放大之前快速闪烁元素

javascript - zoomIn 效果（Animate.css）在元素消失和放大之前快速闪烁元素

问题描述

我有一张我想在页面刷新时放大的图像。该图像位于页面的最顶部。当您从另一个网页打开页面时，图像会在那里停留片刻，然后消失，然后按照元素应有的方式放大。如何让瞬间的外观完全不显示，而让图像从 0 不透明度放大？

这是我的这个项目的代码：

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  100% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}
<div class="Header-Image-Container rellax">
  <img src="images/Calibrator_Logo_Text_NoBackground.png" alt="Header Picture" class="Header-Image 
    wow zoomIn" data-wow-duration="3s" />
</div>

这是我遇到问题的实际站点的链接：www.calibrator.ca/TestSite。我只是想让图像从 0 不透明度开始，然后缩放到 1。在我看来，css 代码似乎可以完成此操作，但是当它在 chrome 和 firefox 中呈现时，它会在它消失之前有这个图像的闪光. 任何帮助表示赞赏。

标签： javascripthtmlcss

解决方案

如果加载图像的绘制和动画开始之间有任何延迟（很可能），图像将在很短的时间内可见，从而导致您看到闪光。一种解决方案是在开始时为图像设置样式visibility: hidden，然后将其设置visibility为visible动画的第一帧（或使用 JavaScript 使其可见）。（您也可以最初将图像设置为样式，opacity: 0但随后您也可能会在开始时看到一个非 scale3d 图像，因此您最初也需要设置样式；从 . 开始可能更容易visibility: hidden。）

顺便说一句，使用您编写的代码，您还可能会在图像加载之前发生动画（快速连接和缓存图像可能不会注意到这一点）。如果发生这种情况，您的动画基本上对用户来说是不可见的。一种解决方案是仅zoomIn在图像load事件触发后将动画类 ( ) 添加到图像中。（理想情况下，您可以load使用 将处理程序附加到图像addEventListener()，但您也可以保持简单并onload直接在<img>标签中使用属性。）

推荐阅读