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

Posted 2023-03-06

【中文标题】页面加载时触发CSS转换属性[重复]

【英文标题】：CSS transition property triggering on page load [duplicate]

【发布时间】：2014-11-03 15:06:39

【问题描述】：

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

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

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

【问题讨论】：

这不是重复的。问题***.com/questions/6805482/… 询问如何在页面加载时制作动画，而我要求在页面加载时stop 动画。

【参考方案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");
);

【讨论】：

我想避免使用 javascript 或 jquery。

关键帧可能会延迟动画