css动画设置渐进渐出_具有srcset和CSS动画的渐进增强灯箱

css动画设置渐进渐出

An earlier article on this site demonstrated how to use the HTML5 <dialog> element to create easy “lightbox” UI. A few of my web development students are trying to take the pattern further by placing large sections of content in the <dialog>, but are experiencing a few problems in doing so. I thought I’d use the opportunity to update the script, and show how it can be used in a way to progressively enhance page content.

该站点上的较早文章演示了如何使用HTML5 <dialog>元素创建简单的“灯箱” UI 。 我的一些Web开发学生正在尝试通过将大部分内容放在<dialog>来进一步发展这种模式，但是这样做遇到了一些问题。 我以为我会借此机会来更新脚本，并展示如何以逐步增强页面内容的方式使用它。

规则一：内容至上 (Rule No. 1: Content First)

There are many ways of “hiding” the content for each image, but the first rule of progressive enhancement is not to hide the content at all, at least not by default; the content is already there, on the page, where it can be picked up by search engines and screen readers. In this case, we’re looking at linked thumbnail images that expand to full image versions with descriptive text. Because the text content is extremely lightweight, it will be included in the basic markup of the page. I also used srcset for the images, although that is not essential to the technique:

有很多“隐藏”每个图像内容的方法，但是渐进增强的第一个规则是根本不隐藏内容 ，至少默认情况下不隐藏 ； 该内容已经在页面上了，可以由搜索引擎和屏幕阅读器获取。 在这种情况下，我们正在查看链接的缩略图，这些缩略图会扩展为带有描述性文字的完整图像版本。 由于文本内容非常轻巧，因此将包含在页面的基本标记中。 我还对图像使用了srcset ，尽管这对于该技术不是必需的：

<div id="proglight" class="progrock">
	<figure>
		<img src="sossusvlei-namibia-thumb-1x.jpg" srcset="sossusvlei-namibia-thumb-1x.jpg 1x, sossusvlei-namibia-thumb-2x.jpg 2x" alt="Stunted dead black trees photographed against red dunes and a blue sky">
		<figcaption>
			<h1>Sossusvlei salt pan, Namib Desert</h1>
			<p>One of the harshest and most unforgiving environments on Earth, the Sossusvlei is in the southern part of the Namib Desert, in the African nation of Namibia…
...

There’s also an empty <dialog> element on the same page:

在同一页面上还有一个空的<dialog>元素 ：

<dialog id="fullDetails"></dialog>

The other image inside the <div> takes the same pattern. Next, the CSS sets up the display of each <figure> element, which will allow us to hide them via JavaScript applied later:

<div>的另一个图像采用相同的模式。 接下来， CSS设置每个<figure>元素的显示，这将允许我们通过稍后应用JavaScript隐藏它们：

#proglight {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
}
.progrock h1 { font-weight: 100; }
.progrock img {
	float: left; width: 50%;
}
.progrock p, .progrock h1 { 
	margin-left: calc(50% + 2rem);
}
figure.min *:not(img) { 
	display: none; 
}
figure.min img { width: 100%; }
figure.min:hover { cursor: pointer; }

The containing <div> uses flexbox to push the elements apart; calc is used to maintain a consistent separation between the images and their associated text. Note the combination of the :not selector and the .min class with display: none, which will ensure that <figure> elements will only show their images.

包含的<div>使用flexbox将元素分开； calc用于保持图像及其关联文本之间的一致分隔。 请注意:not选择器和.min类与display: none ，这将确保<figure>元素仅显示其图像。

The elements don’t have a class by default; that’s applied by JavaScript:

默认情况下，元素没有类。 这是由JavaScript应用的：

var panels = document.querySelectorAll("#proglight figure"),
dialog = document.getElementById("fullDetails");
Array.prototype.forEach.call(panels, function(panel) {
panel.classList.add("min");
panel.addEventListener("click", function(){
	var panelImg = this.getElementsByTagName("img")[0],
	panelContent = this.querySelector("figcaption");
	showDialog(panelImg, panelContent);
	})
});

This portion of the script grabs the <dialog> element for manipulation, allows the content of each <figure> panel to be hidden, and adds a call to a function when a panel is clicked, passing it references to the appropriate <img> and <figcaption> inside:

脚本的这一部分抓取<dialog>元素进行操作，允许隐藏每个<figure>面板的内容，并在单击面板时添加对函数的调用，并将其引用传递给适当的<img>和<figcaption>里面：

function showDialog(panelImg, panelContent) {
	var fullImage = document.createElement("img");
	fullImage.src = panelImg.src.replace("-thumb", "");
	fullImage.alt = panelImg.alt;
	var closedialog = document.createElement("button");
	closedialog.id = "closeDetails";
	closedialog.classList.add("ss-icon");
	closedialog.innerHTML = "close";
	dialog.appendChild(closedialog);
	dialog.appendChild(fullImage);
	var textContent = panelContent.cloneNode(true);
	dialog.appendChild(textContent);
	dialog.classList.add("progrock");
	dialog.showModal();
	closedialog.onclick = function() {
	dialog.classList.add("closer");
	setTimeout(function() { 
		closeDialog() }, (2000))
	}
}

The function copies the information from the original <img> tag, using the filename to generate the information for the new <img> element in the <dialog>, together with a progressively enhanced UI element in the form of a close button. The original text content is also cloned and added to the same element, the appearance of which is controlled by more CSS:

该函数使用原始文件名从原始<img>标记复制信息，并使用文件名为<dialog>的新<img>元素生成信息，并以关闭按钮的形式逐渐增强UI元素。 原始文本内容也将被克隆并添加到同一元素，其外观由更多CSS控制：

dialog {
	position: fixed;
	left: 50%; top: -50%;
	transform: translate(-50%, -50%);
	border: none;
	background: #fff;
}
dialog[open] {
	animation: fallDown 1s .4s forwards;
	width: 80%; margin: auto;
	max-width: 750px;
	padding: 0;
}
dialog[open] img {
	width: 100%; height: auto; float: none;
}
dialog[open] p, dialog[open] h1 {
	margin-left: 0;
	padding: 0 2rem; 
}
dialog.closer {
	top: 50%;
	animation: fallOff 1s .4s forwards;
}
#closeDetails {
	position: fixed;
	right: -10px;
	top: -10px;
	border-radius: 50%;
	font-size: 1.1rem;
	color: #fff;
	background: rgba(0,0,0,0.8);
	transition: .3s background;
	outline: none;
	border: 2px solid #ccc;
	line-height: 1.3;
	padding-top: .3rem;
	box-shadow: 0 0 8px rgba(0,0,0,0.3);
}
dialog[open]::backdrop {
	animation: fadeToNearBlack 1s forwards;
}
dialog.closer::backdrop {
	background: rgba(0,0,0,0.9);
	animation: fadeToClear 1s 1s forwards;
}

The position of the “close” button takes advantage of a little-known rule in CSS positioning: a fixed element inside another element with position: fixed applied to it is positioned relative to its parent container.

“关闭”按钮的位置利用CSS定位中鲜为人知的规则：另一个元素内的位置为fixed元素，其position: fixed 相对于其父容器定位。

Several animations take over when a <dialog> element is opened or closed:

当打开或关闭<dialog>元素时，几个动画将接管：

@keyframes fadeToNearBlack{
	to { background: rgba(0,0,0,0.9); }
}
@keyframes fadeToClear {
	to { background: rgba(0,0,0,0); }
}
@keyframes fallDown { 
	to { top: 50%; }
}
@keyframes fallOff {
	to { top: 200%; }
}

与手机打交道 (Dealing with Mobile)

Lightbox effects and dialog windows are commonly associated with, and usually best displayed on, desktop-sized displays; anything more than a small amounts of content will force the dialog window to scroll on small screens, rather defeating the entire point of a lightbox. For this example, we can make hiding the content and generating a <dialog> conditional on the viewport being at least a certain with by using a matchMedia rule:

灯箱效果和对话框窗口通常与桌面大小的显示器相关联，并且通常最好在桌面大小的显示器上显示； 除了少量内容外，其他任何操作都将迫使对话框在小屏幕上滚动，而不是破坏灯箱的整个角度。 对于此示例，我们可以使用matchMedia规则隐藏内容并在视口至少确定的情况下生成<dialog>条件：

var panels = document.querySelectorAll("#proglight figure"),
minMatch = window.matchMedia("(min-width: 800px)");
if (minMatch.matches) {
	Array.prototype.forEach.call(panels, function(panel) {
…
	}

This simple test means that the function to create the lightbox effect won’t be run if the browser window opens at 799px wide or less. Note that this simple version isn’t completely responsive, as the condition will not be retested if the user resizes their browser.

这个简单的测试意味着，如果浏览器窗口以799px或更小的宽度打开，则不会运行用于创建灯箱效果的功能。 请注意，此简单版本无法完全响应，因为如果用户调整浏览器的大小，则不会重新测试该条件。

We could match this with some CSS to display the complete content at small sizes:

我们可以将其与一些CSS匹配，以小尺寸显示完整的内容：

@media screen and (max-width: 800px) {
	.progrock img {
		float: none;
		width: 100%;
		display: block;
	}
	.progrock p, .progrock h1 { 
		margin-left: 0;
	}
}
@media screen and (max-width: 600px) {
	#proglight {
		flex-direction: column;
	}
}

There’s other aspects to the demo, including the use of a semantic ligature icon font, that I’ll leave for investigation in the associated Codepen; it should also be noted that many browsers will require polyfills for some of the advanced features, including support for the <dialog> element and srcset. Hopefully this should be enough to get anyone interested started on their own exploration of the possibilities.

该演示还有其他方面，包括语义连字图标字体的使用，我将在相关的Codepen中进行研究。 还应注意，许多浏览器将需要对某些高级功能使用srcset ，包括对<dialog>元素和srcset 。 希望这足以使任何有兴趣的人开始自己探索可能性。

翻译自: https://thenewcode.com/996/A-Progressively-Enhanced-Lightbox-with-srcset-and-CSS-Animation

css动画设置渐进渐出