页面加载时触发CSS转换属性[重复]

Question

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

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

为什么会出现这种行为，我该如何阻止它？

Answer 1

将 class="pageload" 添加到您的正文标签（或任何类名，这只是我用于示例的一个 )

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

并在页面加载后删除该类

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