0

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

考虑以下 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动画时手动分配加载的类？

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

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

4

2 回答 2

1

你可以简化你所拥有的东西。

工作示例

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

于 2013-11-04T21:43:01.900 回答
0

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

于 2013-11-04T21:20:18.490 回答