Question

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

考虑以下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');
});

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

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

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

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

Answer 1

你可以简化你的一点。

<强> Working Example

$('#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>

Answer 2

我只是从$（window）.load（）中删除addClass行。它不会设置动画，您可以在准备动画时添加该类。另外，我通常建议将$（document）.ready（）作为$（window）.load（）的替代方法，作为文档加载后的准备触发，并且可能在整个页面呈现之前立即加载。不过，这只是一个小细节。

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

2 个答案: