加载时CSS背景颜色过渡/滑移 [英] CSS Background color transition/slide over when load

问题描述

我发现CSS过渡效果很好，可以将鼠标悬停在上面，但只能在悬停时使用。 CSS是否有一种方法可以使此操作在加载时不会悬停？

  color：＃FF0000; 
显示：inline-block; 
 background-color：#fff; 
背景位置：0 100％； 
 padding-left：10px; 
 padding-right：10px; 
 -webkit-transition：背景位置1s缓入1s； 
 -moz-transition：背景位置1s缓入1s； 
过渡：背景位置1s缓入1s； 
  

解决方案

没有办法单独使用CSS来延迟动画或过渡效果的执行/应用，直到加载了特定资源的确切时刻为止。但是，可以使用JavaScript完成此操作，但这仍然很棘手，因为背景没有 load / onload 事件图片载入（afaik）。

但是您可以利用浏览器的缓存机制：如果资源在页面中多次使用，则资源加载不会超过一次（除非在非常特殊的情况下） ，这不是默认值，因此请不要在此处应用。）

所以解决方案是将元素的背景图片用作 src < img> 的，并触发该事件的 onload 事件内的动画< img> 。

概念证明：

  body {margin：0;最低高度：100vh；背景：#ccc url（’https://s22849.pcdn.co/wp-content/uploads/2016/10/placeholder-large-1.png’）无重复中心0；过渡：背景位置1s cube-bezier（.4,0，.2,1）;} body.loaded {背景位置：居中；}。占位符{高度：0;}  

 < script type = application / javascript>函数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 />  

关键部分是：

• URL 完全相同


• < img> 的高度为 0 （因此不显示）。

---

一种更干净的方法是 ，不添加< img> 到DOM 。

更改< img> src 属性时c>，即使尚未将其添加到文档对象模型中，浏览器也会加载它。一旦浏览器准备好渲染 onload 事件，该< img> 仍会触发（这意味着立即获取已缓存的图像）。

因此，您要做的就是创建< img> ，将其 src 设置为元素当前的 backgroundImage （剥去周围的 url（） ），并在其 onload 事件中触发动画。在我们的示例中，这是通过向元素添加 loaded 类来完成的。

  const元素= document.body，src = window.getComputedStyle（element）.backgroundImage.slice（4，-1）.replace（/ / g，）; if （src& samp.length）{const img = document.createElement（'img'）; img.onload =（）=> element.classList.add（'loaded'）; img.src = src;}  

  body {margin：0; min-height：100vh;背景：#ccc url（'https://s22849.pcdn.co/wp-content/uploads/2016/10/placeholder-large-1.png'）无重复中心0；过渡：背景位置1s立方- bezier（.4，0，.2，1）;} body.loaded {background-position：center center;}  

p>

如果无法在项目中实现上述功能等，提供更多代码（我将向您展示如何针对您的特殊情况）。

您可以测试，动画总是执行 加载图像后 。 （在隐身窗口或禁用缓存的情况下进行测试）。

更好的测试方法是使用损坏的URL（同时在元素加载时使其明显可见）课-我在上面添加了红色边框）。由于找不到资源，因此永远不应应用 loaded 类，并且不应执行动画。

最后，在4秒钟之后，让我们在元素上放置一个有效的 backgroundImage ，再次运行例程，看看是否背景正确设置动画：

>

  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秒钟后... *我们实际上加载了一个有效的图像，因此我们可以看到*动画是在加载时发生还是已经发生* / setTimeout（function（）{const el = document.body; el.style.backgroundImage =ʻurl（'https://s22849.pcdn.co/ wp-content / uploads / 2016/10 / placeholder-large-1.png'）`; o nLoadBackgroundImage（el）;}，4000）；  

  body {边距：0;最低高度：100vh；背景：#ccc url（’https：// non-existent-url’）无重复中心0；过渡：背景位置1s cube-bezier（.4，0，.2，1）;} body.loaded {背景位置：中心中心；边框：3px纯红色； / *让我们清楚地显示.loaded的应用* / box-sizing：border-box;}  

I've found a CSS transition that works on hover just fine, it slides my background color over, but only on hover. Is there a way with CSS to make this happen on load not hover?

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;

解决方案

There is no way, using CSS alone, to delay the execution/application of an animation or transition effect until the exact moment a particular resource has been loaded. However, it can be done using JavaScript, but it's still tricky, as there is no load/onload event for background images loading (afaik).

But you could take advantage of browser's caching mechanism: it doesn't load a resource more than once if it is used several times in the page (unless under very specific circumstances, which are not default, hence don't apply here).

So the solution would be to use the background image of your element as src of an <img>, and trigger the animation inside the onload event of that <img>.

Proof of concept:

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" />

The key parts are:

• the URL is exactly the same
• the <img> has a height of 0 (so it's not displayed).

---

A cleaner way to do it is without adding the <img> to DOM at all.

When changing the src property of an <img>, the browser will load it, even if it hasn't yet been added to the Document Object Model. And the onload event will still fire on that <img>, as soon as the browser is ready to render it (which means right away for already cached images).

So all you need to do is create an <img>, set its src to your element's current backgroundImage (stripping the surrounding url()) and, in its onload event trigger the animation. In our case, that's done by adding loaded class to the element.

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;
}

If you have trouble implementing the above into your project, provide more code (and I'll show you how to do it for your particular case).

As you can test, the animation is always performed after the image has loaded. (Test in an incognito window or with cache disabled).

An even better test would be to use a broken URL (while making it very obvious when the element has loaded class - I added a red border to it). Since the resource is not found, the loaded class should never be applied and the animation should not be performed.

Finally, after 4 seconds, let's place a valid backgroundImage on the element, run our routine again and see if the background animates correctly:

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;
}

这篇关于加载时CSS背景颜色过渡/滑移的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！