我正在阅读 Jake 的“交叉淡入淡出任何两个 DOM 元素目前是不可能的”,这是一个奇妙的书呆子,深入探讨了如何没有真正的方法来真正地交叉淡入淡出元素。是的,您可以为它们的不透明度设置动画,但即使如此也不完全相同。原来有一个 Chrome/WebKit-only CSS 函数调用-webkit-cross-fade()
可以解决这个问题。MDN 说它是specced,但实现的版本不同,所以有点乱……但它确实存在:
<span style="background-color:#1b1b1b"><span style="color:#f5d67b"><code class="language-css"><span style="color:#f5d67b">.el</span> <span style="color:#72e0d1">{</span>
<span style="color:#72e0d1">background</span><span style="color:#72e0d1">:</span> -webkit-cross-fade<span style="color:#72e0d1">(</span><span style="color:#aa7ee1">url(img1.svg)</span><span style="color:#72e0d1">,</span> <span style="color:#aa7ee1">url(img2.svg)</span><span style="color:#72e0d1">,</span> <span style="color:#fc9463">50</span>%<span style="color:#72e0d1">)</span><span style="color:#72e0d1">;</span>
<span style="color:#72e0d1">}</span></code></span></span>
我什至不知道这是一回事。
我想到的第一件事是:如果其中一个图像只是一个空白的透明图像,那不会将部分透明应用于另一个吗?因此它是一种代理background-opacity
(它不存在但感觉它应该存在)。
我给它做了一个测试,看看它是否有效:
它似乎工作!这是它的肉:
<span style="background-color:#1b1b1b"><span style="color:#f5d67b"><code class="language-css"><span style="color:#f5d67b">.el</span> <span style="color:#72e0d1">{</span>
<span style="color:#72e0d1">background-image</span><span style="color:#72e0d1">:</span> -webkit-cross-fade<span style="color:#72e0d1">(</span>
<span style="color:#aa7ee1">url(image.jpg)</span><span style="color:#72e0d1">,</span>
<span style="color:#aa7ee1">url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)</span><span style="color:#72e0d1">,</span>
<span style="color:#fc9463">50</span>%
<span style="color:#72e0d1">)</span><span style="color:#72e0d1">;</span></code></span></span>
它在 Firefox 中不起作用,但在其他所有事物中都起作用。此外,您可以直接在 CSS 中测试支持,如果这不仅仅是增强功能,则可以做一些不同的事情。
<span style="background-color:#1b1b1b"><span style="color:#f5d67b"><code class="language-css"><span style="color:#83ba52">@supports <span style="color:#72e0d1">(</span><span style="color:#72e0d1">background</span><span style="color:#72e0d1">:</span> -webkit-cross-fade<span style="color:#72e0d1">(</span><span style="color:#aa7ee1">url()</span><span style="color:#72e0d1">,</span> <span style="color:#aa7ee1">url()</span><span style="color:#72e0d1">,</span> <span style="color:#fc9463">50</span>%<span style="color:#72e0d1">)</span><span style="color:#72e0d1">)</span></span> <span style="color:#72e0d1">{</span>
<span style="color:#5e7671"><em>/* Only apply the idea if supported, do the Firefox fallback outside of this */</em></span>
<span style="color:#72e0d1">}</span></code></span></span>
这已经融入了上面的演示中。