html - CSS 加载时背​​景颜色过渡/滑过

Question

我发现一个 CSS 过渡在悬停时效果很好，它会将我的背景颜色滑过，但仅限于悬停时。 CSS 有没有办法让这种情况在加载而不是悬停时发生？

color: #FF0000;
display: inline-block;
background-color: #fff;
background-position: 0 100%;
padding-left: 10px;
padding-right: 10px;
-webkit-transition: background-position 1s ease-in 1s;
-moz-transition: background-position 1s ease-in 1s;
transition: background-position 1s ease-in 1s;

Answer 1

单独使用 CSS 无法延迟动画或过渡效果的执行/应用，直到加载特定资源的确切时刻。然而，它可以使用 JavaScript 来完成，但这仍然很棘手，因为没有 load/onload背景图像加载事件(据我所知)。

但是您可以利用浏览器的缓存机制:如果在页面中多次使用资源，它不会多次加载资源(除非在非常特殊的情况下，这不是默认的，因此此处不适用)。

因此解决方案是将元素的背景图像用作 src的<img> ，并触发 onload 内的动画事件<img> .

概念证明:

body {
  margin: 0;
  min-height: 100vh;
  background: #ccc url('https://s22849.pcdn.co/wp-content/uploads/2016/10/placeholder-large-1.png') no-repeat center 0;
  transition: background-position 1s cubic-bezier(.4,0,.2,1);
}
body.loaded {
  background-position: center center;
}
.placeholder {
  height: 0;
}

<script type="application/javascript">
function moveBackground() {
  document.body.classList.add('loaded');
}</script>
<img src="https://s22849.pcdn.co/wp-content/uploads/2016/10/placeholder-large-1.png" onload="moveBackground()" class="placeholder" />

关键部分是:

• 网址完全相同
• <img>高度为0 (因此不会显示)。

---

更简洁的方法是不添加 <img>完全转向 DOM。

更改 src 时<img> 的属性(property)，浏览器将加载它，即使它尚未添加到文档对象模型中。还有onload事件仍将在 <img> 上触发，一旦浏览器准备好渲染它(这意味着立即渲染已经缓存的图像)。

所以您需要做的就是创建一个 <img> ，设置其src到您元素的当前 backgroundImage (剥离周围的 url() )，并且在其 onload 中事件触发动画。在我们的例子中，这是通过添加 loaded 来完成的。元素的类。

const element = document.body,
  src = window.getComputedStyle(element).backgroundImage.slice(4, -1).replace(/"/g, "");
if (src && src.length) {
  const img = document.createElement('img');
  img.onload = () => element.classList.add('loaded');
  img.src = src;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #ccc url('https://s22849.pcdn.co/wp-content/uploads/2016/10/placeholder-large-1.png') no-repeat center 0;
  transition: background-position 1s cubic-bezier(.4, 0, .2, 1);
}

body.loaded {
  background-position: center center;
}

如果您在元素中实现上述内容时遇到困难，请提供更多代码(我将向您展示如何针对您的特定情况执行此操作)。

正如您所测试的，动画总是在图像加载后执行。 (在隐身窗口或禁用缓存的情况下进行测试)。

更好的测试是使用损坏的 URL(同时当元素具有 loaded 类时变得非常明显 - 我为其添加了红色边框)。由于找不到资源，loaded永远不应该应用类并且不应该执行动画。

最后，4 秒后，让我们输入一个有效的 backgroundImage在元素上，再次运行我们的例程并查看背景动画是否正确:

function onLoadBackgroundImage(element) {
  const src = window.getComputedStyle(element).backgroundImage.slice(4, -1).replace(/"/g, "");
  if (src && src.length) {
    const img = document.createElement('img');
    img.onload = () => element.classList.add('loaded');
    img.src = src;
  }
}
/* 4 seconds later... 
 * we actually load a valid image so we can see 
 * if the animation happens when it loads or it already happened */
setTimeout(function() {
  const el = document.body;
  el.style.backgroundImage = `url('https://s22849.pcdn.co/wp-content/uploads/2016/10/placeholder-large-1.png')`;
  onLoadBackgroundImage(el);
}, 4000);

body {
  margin: 0;
  min-height: 100vh;
  background: #ccc url('https://non-existent-url') no-repeat center 0;
  transition: background-position 1s cubic-bezier(.4, 0, .2, 1);
}

body.loaded {
  background-position: center center;
  border: 3px solid red; /* let's make the application of .loaded obvious */
  box-sizing: border-box;
}