我发现一个 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;
仅使用 CSS 无法延迟动画或过渡效果的执行/应用，直到加载特定资源的确切时刻。然而，它可以使用 JavaScript 来完成，但这仍然很棘手，因为没有load/onload背景图像加载事件（据我所知）。
但是您可以利用浏览器的缓存机制：如果在页面中多次使用资源，它不会多次加载资源（除非在非常特殊的情况下，这不是默认的，因此不适用此处）。
所以解决方案是将元素的背景图像用作src of an <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" />
关键部分是：
- 网址是exactly相同
- the
<img>高度为0（所以不显示）。
一种更干净的方法是不添加<img>完全到 DOM.
当改变src的财产<img>，浏览器将加载它，即使它尚未添加到文档对象模型中。还有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;
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
