触发css动画_使用CSS媒体查询触发JavaScript操作

最新推荐文章于 2024-05-23 22:54:35 发布

cungui5726

最新推荐文章于 2024-05-23 22:54:35 发布

阅读量299

点赞数

文章标签： css javascript java js vue ViewUI

原文链接：https://thenewcode.com/948/Triggering-JavaScript-Actions-With-CSS-Media-Queries

版权

触发css动画

It’s common to use matchMedia in JavaScript to create behaviors at breakpoints for responsive sites. But the fact that matchMedia takes its own breakpoint values leads to inconsistencies and confusion between JavaScript actions and CSS media query events: changing the value for a CSS breakpoint inevitably means hunting down and changing the equivalent value in your scripts to keep them in sync. Ideally, responsive actions in JavaScript should be initiated by changes in CSS. We can achieve that, using a trick I picked up from Lukas Rydygel:

通常在JavaScript中使用matchMedia在响应点的断点处创建行为。但是matchMedia具有自己的断点值的事实导致JavaScript操作和CSS媒体查询事件之间的不一致和混乱：更改CSS断点的值不可避免地意味着降低并更改脚本中的等效值以使其保持同步。理想情况下， JavaScript中的响应动作应通过CSS的更改来启动 。我们可以使用我从Lukas Rydygel中学到的技巧来实现这一目标：

First, we need a method of communicating between CSS and JavaScript. In theory, a script could pick up a style change on any element, but it makes sense to make this communication as clear and explicit as possible.

首先，我们需要一种在CSS和JavaScript之间进行通信的方法。从理论上讲，脚本可以对任何元素进行样式更改，但是使这种通信尽可能清晰明确是有意义的。

瓶中的消息 (Message In A Bottle)

The pseudo-elements :before and :after have the advantage of take any content as a value. Every block-level element has access to both… even the <body>. So we can use either element to contain a message that can be read by a script:

伪元素:before和:after具有将任何内容作为值的优点。每个块级元素都可以访问这两个元素，甚至可以访问<body> 。因此，我们可以使用任何一个元素来包含可由脚本读取的消息：

@media all and (max-width: 800px) {
	body:before { content: 'tablet'; display: none; }
}

This places a “message” on the <body> when the viewport is 800 pixels wide or less. Because it is set to display: none, only JavaScript will be able to read it, and the added text won’t disrupt accessibility.

当视口宽度等于或小于800像素时，这会在<body>上放置一个“消息”。因为将其设置为display: none ，所以只有JavaScript能够读取它，并且添加的文本不会破坏可访问性。

Next, we read this message with a script:'

接下来，我们使用脚本阅读此消息：

function checkForViewportChange () {
	var state = window.getComputedStyle(document.body,':before').content;
	this.lastState = this.lastState || "";
	if (state != this.lastState) {
		if (state == "tablet") {
			// do something when viewport switches to tablet state
		} else {
			// do something when viewport moves out of tablet mode
		}
	this.lastState = state;
}}

The ideal method of calling this function would use a mutator, but those are very new to JavaScript, and only supported by very recent browsers. Instead, polling with setInterval is used:

调用此函数的理想方法是使用增变器，但这些变体对于JavaScript来说是非常新的，并且仅受最近的浏览器支持。而是使用setInterval轮询：

window.setInterval (checkForViewportChange, 150);

Changing the breakpoint of the CSS media query will alter when the JavaScript behavior fires, making the two interdependent. This technique can be extremely useful when prototyping responsive sites, as breakpoints often change frequently during development; once the work is complete, more efficient matchMedia actions could be substituted for the code.

触发JavaScript行为时，更改CSS媒体查询的断点将发生变化，从而使两者相互依赖。当对响应性站点进行原型设计时，此技术可能非常有用，因为在开发过程中断点经常变化。一旦工作完成，可以用更有效的matchMedia动作代替代码。

翻译自: https://thenewcode.com/948/Triggering-JavaScript-Actions-With-CSS-Media-Queries

触发css动画

cungui5726

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
触发css动画_使用CSS媒体查询触发JavaScript操作

触发css动画It’s common to use matchMedia in JavaScript to create behaviors at breakpoints for responsive sites. But the fact that matchMedia takes its own breakpoint values leads to inconsistencies and co...
复制链接

扫一扫