时光倒流童年_时光倒流：使用JavaScript触发CSS动画

时光倒流童年

CSS has many powerful features, but one major limitation: changes to elements can only affect those that follow them. That is, hover on an element can affect the next element, using an adjacent or sibling selector, or a child element with a descendant selector, but not any other element on the page. This limits CSS interactivity to certain modalities… and while there’s plenty of room within this space, forcing certain kinds of UI to work with pure CSS sometimes necessitates a degree of trickery and inspired hacks.

CSS具有许多强大的功能，但有一个主要限制：对元素的更改只能影响跟随它们的元素。 也就是说，将hover在元素上可以使用相邻或同级选择器或带有后代选择器的子元素(而不是页面上的任何其他元素)影响下一个元素。 这将CSS交互性限制为某些模式……并且尽管在此空间中有足够的空间，但是迫使某些类型的UI与纯CSS一起使用有时会需要一定程度的欺骗性和启发性的破解。

JavaScript has the ability to modify arbitrary elements on the page, linking an action here to an effect over there. CSS animations run “closer to the metal” than JavaScript manipulations, making smoother, swifter and cleaner transitions. When an effect would benefit from the strengths of both technologies, it makes sense to merge them.

JavaScript能够修改页面上的任意元素，从而将此处的动作链接到该处的效果。 CSS动画比JavaScript操纵“更接近金属”，从而使过渡更平滑，更快捷和更清洁。 当一种效果将从两种技术的优势中受益时，将它们融合是有意义的。

A good example is my earlier creation of a modern imagemap that utilized CSS3 transitions to create popup information boxes. While it worked, it did so only to a fashion: the use of the CSS :target pseudo-selector meant that current browsers would visually jump the page to the clicked portion of the imagemap due to a shared bug.

一个很好的例子是我先前创建的现代图像映射，该图像映射利用CSS3过渡来创建弹出信息框。 当它起作用时，它只能以某种方式做到这一点： CSS :target伪选择器的使用意味着当前的浏览器由于存在共享错误，会在视觉上将页面跳转到图像映射的单击部分。

Rather than wait for the browser code to be fixed, a better solution right now would be to hybridize the effect: keep the pop-up elements as pure HTML, and retain the transitions, but use JavaScript to initiate the effect.

现在，与其等待浏览器代码修复，不如等待一个更好的解决方案，那就是混合使用效果：将弹出式元素保持为纯HTML格式 ，并保留过渡内容 ，但使用JavaScript来启动效果。

To demonstrate this idea I’ll create another imagemap, this time of old Montreal in the 1700s. You can see the imagemap hotspots highlighted in the illustration. I won’t cover this step here; if you’re interested, you can read how to make an imagemap in Dreamweaver.

为了展示这个想法，我将创建另一个图像地图，这次是在1700年代的旧蒙特利尔。 您可以看到图中突出显示的图像地图热点。 我不会在这里介绍这一步骤； 如果您有兴趣，可以阅读如何在Dreamweaver中制作图像映射 。

Each area on the imagemap uses the freeform HTML5 data attribute to create data-pop, with a value that matches the id of the associated <figure> element. Each interior <figure> contains information related to the highlighted area.

图像地图上的每个区域都使用自由格式的HTML5 data属性来创建data-pop ，其值与关联的<figure>元素的id相匹配。 每个内部<figure>包含与突出显示区域有关的信息。

<figure id="oldmap">
	<figure id="old-montreal">
		<img src="basilique-notre-dame.jpg" alt="Photograph of Notre Dame">
		<h4>Old Montreal</h4>
		<figcaption>The site of the original French settlement, turned into a fortified city in 1721.</figcaption>
	</figure>
<figure id="biodome">
	<img src="ring-tailed-lemur.jpg" alt="Photograph of ring-tailed lemur">
	<h4>Biodome</h4>
	<figcaption>
Originally constructed as a velodrome and judo dojo for the 1976 Olympic Games, the dome was converted into a nature exhibit in 1992.
	</figcaption>
</figure>
	<img src="montreal.jpg" alt="Map of Montreal in 1700"
style="max-width:100%;height:auto;" usemap="#montreal">
	<map name="montreal" style="position: relative">
	<area shape="poly" alt="Old Montreal" data-pop=old-montreal
coords="577,282,562,270,521,290,531,309,557,307,575,298,578,231">
	<area shape="poly" coords="586,320,595,300,590,288,570,312"
alt="Biodome" data-pop=biodome >
	</map>
</figure>

Above that, I’ll create a few rules for the individual <figure> elements to determine their position, an attribute selector to set them all to hidden (using opacity) and a class (.popup) that will be used to “pop” each <figure> into existence:

在此之上，我将为个别<figure>元素创建一些规则来确定它们的位置，为所有元素设置为隐藏(使用opacity )的属性选择器，以及将用于“弹出”的类( .popup )。每个<figure>存在：

figure#oldmap {
	margin: 0;
	padding: 0;
	position: relative;
}
figure#oldmap figure {
	width: 200px;
	position: absolute;
	background: rgba(238,238,238,0.78);
	border: 1px solid rgba(177,177,177,0.8);
	border-radius: 3px;
	opacity: 0;
	left: 203px;
	top: 120px;
	z-index: 99;
	transform: scale(0.8);
	transition: .4s all cubic-bezier(.06,.62,.73,1.5);
	padding: 0;
}
figure#oldmap figure img { 
	width: 100%;
}
.popup {
	opacity: 1;
	transform: scale(1);
}
figure#oldmap figure h4 {
	text-align: center;
	margin: .5rem;
}
figure#oldmap figure figcaption {
	padding: .5rem;
	margin-top: 0;
	margin-bottom: 1rem;
}

Finally the script at the end of the page:

最后，脚本在页面末尾：

$('area').click(function() {
	var popup = $(this).attr('data-pop');
	$('figure#oldmap figure').removeClass("popup");
	$("#" + popup).addClass("popup");
	return false;
});

The JQuery code is very simple: using the value of data-pop from the area that is clicked on to determine the id of the <figure> to apply the popup class to.

JQuery代码非常简单：使用单击区域中data-pop的值来确定<figure>的id ，以将popup类应用于该id 。

You’ll note that the script doesn’t immediately work, even though the class is applied, due to the fact that the class will not overrule the established CSS. One way to get around this is to add the recently-discussed !important: to the declarations:

您会注意到，即使应用了该类，该脚本也不会立即生效，因为该类不会推翻已建立CSS。 解决此问题的一种方法是将最近讨论的!important ：添加到声明中：

.popup {
	opacity: 1 !important;
	transform: scale(1) !important;
}

This brings the two technologies nicely together: the transition will occur due to the state of the element changing: in this case, through having a new class applied via JavaScript.

这将两种技术很好地结合在一起：过渡将由于元素状态的改变而发生：在这种情况下，通过使用JavaScript来应用新类。

翻译自: https://thenewcode.com/596/A-Stitch-In-Time-Using-JavaScript-To-Trigger-CSS-Animations

时光倒流童年