防止 CSS3 动画在页面加载后触发

Prevent CSS3 animation from firing after page load

本文关键字：加载 CSS3 动画 防止      更新时间：2023-09-26

我的问题是我的动画在页面加载后立即触发。

考虑以下 CSS：

.panel {
    opacity: 0;
}
.loaded .panel {
    -webkit-animation: hidepanel 1s ease;
    -webkit-animation-fill-mode: both;
}
.panel.active {
    -webkit-animation: showpanel 1s ease;
    -webkit-animation-fill-mode: both;
}
@-webkit-keyframes showpanel {
    0% { opacity: 0; }
    100% { opacity: 1.0; }
}
@-webkit-keyframes hidepanel {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

。和以下 JS：

$(window).load(function() {
    $('body').addClass('loaded');
});

在此配置中，隐藏面板动画在加载页面后立即触发。但是，我要发生的是隐藏面板动画仅在我添加然后删除活动类后触发。

有没有办法实现这一点，而不必在每次我想看到隐藏面板动画时手动分配加载的类？

这是演示问题的小提琴。您可以看到红色框最初淡出。这表示页面加载时我的元素会发生什么情况。http://jsfiddle.net/Tz9p4/

更新我最终将其作为解决方案：http://jsfiddle.net/Tz9p4/1/。我仍然认为希望除了每次我想调用 hidepanel 动画时检查加载的类之外还有更好的方法，但目前似乎没有。

你可以简化你所拥有的一点。

工作示例 

$('#btnLogin').click(function() {
  $('.panel').toggleClass('active');
});
.panel {
  background-color: red;
  height: 200px;
  opacity: 0;
  width: 200px;
  transition: 2s;
}
.panel.active {
  opacity: 1;
  transition: 2s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="body">
  <div class="panel"></div>
</div>
<button id="btnLogin">Login</button>

我会从$（window）.load（）中删除addClass行。 它不会进行动画处理，您可以在准备好进行动画处理时添加类。 此外，我通常建议 $（document）.ready（） 作为 $（window）.load（） 的替代方案，因为 ready 在文档加载后触发并更立即加载，可能在整个页面渲染之前。 不过，这只是一个小细节。

相关文章：