CSS转换属性在页面加载时触发

Question

我在探索CSS动画。当我对结果感到满意时，我一直在codepen开发并手动将代码移动到my server。页面上的几个元素使用transition属性来设置动画。

在codepen上，我的代码表现得像我期望的那样，但当我将其移动到我的服务器时，所有转换都会在页面加载时触发：我的导航元素从屏幕顶部下拉，我的横幅扩展为填充它的空间等。如果我在本地查看相同的文件，页面加载时的动画就不会发生。

为什么我会遇到这种行为，如何阻止它？

Answer 1

将class =“pageload”添加到您的body标签（或任何类名，这只是我用于示例的一个 ）

body.pageload * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
}

并在页面加载后删除该类

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