javascript - 仅适用于智能设备的样式表

Question

我有两个样式表，一个是 core.css，另一个是 tablet-and-mobile.css，如下所示:

<link rel="stylesheet" type="text/css" href="assets/css/core.css">
<link rel="stylesheet" media="screen and (max-width: 1024px)" href="assets/css/tablet-and-mobile.css" />

转到 www.loaistudio.com并开始将宽度从 1024px 以上调整到以下，以便应用平板电脑和手机样式表。

你能注意到元素在跳跃吗？那是因为他们中的一些人有:

-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;

如何解决这个问题!我需要在它们上进行过渡，但是有没有办法防止发生跳跃？

Answer 1

问题的根源在于您对所有 属性的转换应用。使用附加的 transition-property 补充这些规则，并包含一个以逗号分隔的仅包含您要转换的属性的列表。例如:

transition-property: opacity, max-height;

这会顺便节省大量计算时间!