css淡入_使用JavaScript和CSS创建顺序图像淡入

css淡入

In an article last year I demonstrated how to fade in images one after another on a web page using JQuery. As JavaScript grows and browser version adoption rates mature, the need for JQuery – originally written to fill and smooth gaps and inconsistencies with Internet Explorer’s support for JavaScript – becomes less and less.

在去年的一篇文章中，我演示了如何使用JQuery在网页上逐张淡入图像 。 随着JavaScript的增长和浏览器版本采用率的提高，对JQuery的需求(最初是为了填补和消除与Internet Explorer对JavaScript的支持之间的差距和不一致)而变得越来越少。

The code that follows, written in pure JavaScript and CSS, will run in modern browsers, including Firefox, Chrome, Safari and Internet Explorer 9 and above.

随后的代码以纯JavaScript和CSS编写，将在包括Firefox，Chrome，Safari和Internet Explorer 9及更高版本的现代浏览器中运行。

The basic HTML:

基本的HTML ：

<div id="cars">
	<img src="talbot-lago-t23-teardrop-coupé.jpg" alt>
	<img src="alfa-romeo-bat-7.jpg" alt="Photograph of blue Alfa Romeo BAT-7">
	<img src="hispano-suiza-dubonnet-xenia-top.jpg" alt="Photograph of Hispano-Suiza Dubonnet Xenia car from above">
	<img src="hispano-suiza-dubonnet-xenia-back.jpg" alt="Photograph of Hispano-Suiza Dubonnet Xenia car from behind">
</div>

The CSS describes the default appearance of the images and the <div> that contains them, together with a  .visible class, which will be applied later via JavaScript:

CSS描述了图像的默认外观以及包含图像的<div>以及.visible类，这些类稍后将通过JavaScript应用：

div#cars {
	font-size: 0;
	background: #000;
} 
div#cars img {
	width: 50%;
	height: auto; 
	opacity: 0;
	transition: .8s opacity;
}
div#cars img.visible {
	opacity: 1;
}

The stylesheet declares that all images in the <div> will be invisible by default, and any image with a class of .visible applied to it will fade in over a little less than a second. The CSS is shown without vendor prefixes for simplicity.

样式表声明<div>中的所有图像默认情况下都是不可见的，并且任何应用了.visible类的图像都将在不到一秒钟的时间内消失。 为了简单起见，显示CSS没有供应商前缀。

Finally, at the end of the page, the script:

最后，在页面末尾，脚本：

var cars = document.querySelectorAll("#cars img"), i = 1;
Array.prototype.forEach.call(cars, function(car) { 
      setTimeout(function(){ car.classList.add("visible") }, 700*i)
i++;
})

The JavaScript gathers all of the images in the <div> and sets an incremental variable. It then loops through each image, adding a class of .visible. Due to the timeout function, each image will have its class added 700ths of a second after the previous one, creating a series of transitioned photographs. Alternatively, you could ignore the class and apply the new opacityvalue directly to the images with JavaScript; the transition will work either way.

JavaScript收集<div>中的所有图像并设置一个增量变量。 然后，它循环遍历每个图像，并添加一类.visible 。 由于具有超时功能，每张图像的类别将在上一张图像的基础上增加700秒，从而创建一系列过渡的照片。 另外，您可以忽略该类，并使用JavaScript将新的opacity值直接应用于图像。 过渡将以任何一种方式进行。

后备 (Fallbacks)

To play safe with older versions of IE, you could simply add a conditional comment after your stylesheet that set the opacity of the images to 1 by default for IE 8 and earlier:

为了安全地使用旧版本的IE，您只需在样式表后添加条件注释，即可将IE 8和更早版本的图像的不透明度默认设置为1：

<!--[if lt IE 9]>
<style>
div#cars img { opacity: 1; }
</style>
<![endif] -->

In the rare case of JavaScript being blocked or failing, the images could be faded in with a keyframe animation set to bring the images to complete opacity after a 4 second delay:

在极少数的情况下，JavaScript被阻止或失败，可以使用关键帧动画设置淡入图像，以使图像在经过4秒钟的延迟后完全不透明：

@keyframes solidbackup {
      to { opacity: 1; }
}
div#cars img {
	animation: solidbackup 1s 4s forwards;
}

结论 (Conclusion)

As you can see, it’s entirely possible to create relatively complex animation sequences without the need for 100K frameworks, allowing both CSS and JavaScript to work together in harmony, each doing what it does best.

如您所见，完全可以创建相对复杂的动画序列而无需100K框架，从而使CSS和JavaScript可以和谐地协同工作，各尽所能。

翻译自: https://thenewcode.com/841/Create-a-Sequential-Image-Fade-In-With-JavaScript-and-CSS

css淡入