我有两个样式表,一个是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;


如何解决这个问题!我需要进行过渡,但是是否有阻止过渡发生的方法?

最佳答案

问题的根源是您应用到all属性的转换。用附加的transition-property补充这些规则,并仅包含要转换的属性的逗号分隔列表。例如:

transition-property: opacity, max-height;


附带地说,这将节省大量计算时间!

09-16 22:04