css 作用域_将CSS动画的作用域设置为媒体查询

css 作用域

When coding my blog's redesigns, I think and design the site in device width stages, and in the following order:

在对博客的重新设计进行编码时，我会按照设备宽度阶段并按以下顺序来思考和设计网站：

• Desktop:  all general styles, none wrapped in a media query
  桌面：所有常规样式，没有包裹在媒体查询中的样式
• Tablet:  media query, roughly popular tablet widths
  平板电脑：媒体查询，大致流行的平板电脑宽度
• Phone:  media query, any width below tablet width
  电话：媒体查询，低于平板电脑宽度的任何宽度

• Print:  media query, mostly a bunch display: none

  打印：媒体查询，大部分为一堆display: none

Since I focus on desktop and that platform is the most powerful, I generally end up adding CSS animation and transition properties to the global selectors.  While this works, a comment on CSS Animations Between Media Queries made me think otherwise:

由于我专注于台式机，并且该平台功能最强大，因此我通常最终将CSS动画和过渡属性添加到全局选择器。 在此过程中，对“媒体查询之间CSS动画”的评论使我产生了其他想法：

For performance reasons, I often do exactly the opposite: scope animation css such that transitions only apply to wider widths...

出于性能原因，我经常做相反的事情：范围动画css使得过渡仅适用于更宽的宽度...

He's right:  scoping your CSS animations and transitions to desktop, instead of removing those properties at smaller widths, is more maintainable and has to be more performant.  So here's how to do it:

他是对的：确定CSS动画的范围并过渡到桌面，而不是以较小的宽度删除这些属性，它更易于维护并且必须具有更高的性能。 因此，方法如下：

.logo {
	width: 200px;
	height: 100px;
	display: block;
}

@media (min-width: 1024px) {
	/* Only do logo animation on desktop, otherwise don't bother */
	.logo {
		opacity: 0;
		transition: opacity 1s;
	}
	.logo.loaded {
		opacity: 1;
	}
}

The code isn't impressive but the idea is a great one, and not one I've used in the past.  We all think about making our sites look good on mobile but we need to consider another media query -- "desktop minimum".

代码虽然不令人印象深刻，但是这个想法很棒，而不是我过去使用过的想法。 我们都考虑过让网站在移动设备上看起来不错，但我们需要考虑另一种媒体查询-“桌面最小”。

I wouldn't consider this a case of "mobile first", which I don't subscribe to.  But specifying the scope of an animation or transition is a brilliant idea when it comes to performance!

我不认为这是“移动优先”的案例，我不赞成这样做。 但是，当涉及到性能时，指定动画或过渡的范围是一个绝妙的主意！

翻译自: https://davidwalsh.name/scoping-css-animations-media-queries

css 作用域