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

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 动画仅在我添加然后删除active 类后触发。

有什么方法可以实现这一点，而无需每次我想看到hidepanel 动画时手动分配loaded 类？

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

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

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>