【前端】解决 CSS 的 transition 在页面加载时就播放过渡动画的问题

问题

在给某个元素的 CSS 设置了 transition 后,每当页面加载、刷新完成后,元素出现【默认属性 → \rightarrow 设定属性】的过渡。比如 a 元素默认的 color蓝色,在 CSS 中设置为灰色,设置 transitioncolor 0.5s,并且给 a:hovercolor 设置为白色。这我们是想实现光标移动到 a 元素上时,它由灰色慢慢变成白色(以及光标移开时相反)。但是页面加载时我们能看到:它由默认值蓝色慢慢变成了灰色。这个过渡我们是不需要的,如何消除呢?

解决方案

以下方法来自于CSS-Tricks

【思路】初始加载时我们不给元素有过渡效果,当加载完毕后再把过渡放上去。
【具体方法】

  1. 给整个 body 添加一个叫 preload (或其它)的类:
<body class="preload">
	...
body>
  1. 给这个类的 transition 设为 none
.preload {
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-ms-transition: none !important;
	-o-transition: none !important;
	transition: none !important;
}

-webkit-等前缀的作用可参考这里。注意别忘了 !important,以覆盖原来设置的属性。

  1. 添加 jQuery 脚本,加载完毕时给 body 移除 preload 类:
$(window).on('load', function() {
	$("body").removeClass("preload");
});

注意,在 CSS-Tricks 的原文章中,脚本是这样写的:

$(window).load(function() {
	$("body").removeClass("preload");
});

在较晚的 jQ 版本中,.load 方法已被移除。可用上面的方式改写。


你可能感兴趣的:(【前端】解决 CSS 的 transition 在页面加载时就播放过渡动画的问题)