我有两个样式表,一个是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;
附带地说,这将节省大量计算时间!