Jquery 为什么在页面加载时执行转换？

我有一个导航菜单，它有一个CSS：

nav {
    height: 700px;
    width: 100%;
    background-color: rgb(158, 165, 177);
    position: relative;
    margin-top: -622px;
    -webkit-transition: margin .4s cubic-bezier(1,-0.29,.76,1.32);
       -moz-transition: margin .4s cubic-bezier(1,-0.29,.76,1.32);
        -ms-transition: margin .4s cubic-bezier(1,-0.29,.76,1.32);
         -o-transition: margin .4s cubic-bezier(1,-0.29,.76,1.32);
            transition: margin .4s cubic-bezier(1,-0.29,.76,1.32);

}

.show-nav {
    margin-top: -100px;
}

我使用这个jQuery来触发它：

$('nav').click(function(e) {
    e.preventDefault();
    $(this).toggleClass('show-nav');
});

问题是，每次加载页面时，我都会看到页边空白转换，就好像它有

show nav

类，然后被删除一样

---

为什么会这样？

为什么不将转换放在css中的.show nav声明中？

转换发生在选择器匹配上，而不是当它被删除时。通过演示看看这个（相当广泛的）答案：@Jared Farrish我不确定这对于我的问题意味着什么，因为在，从两个方向向外分层。这都是关于向元素添加类的方式。关联jQuery和类名，主要是

#block.blocks.transition

和

.blocks.transition.show

。甚至分层的

#block.transition.show也被定义了两次，并具有两种不同的效果。您可能“希望”它对您已经拥有的类结构做一些事情，但请注意如何利用类结构为您带来好处。因为我希望它在添加和删除该类结构时发生class@IlyaD-如果你想让他们做出那样的反应，那么为你的转换创建另一个类（可能是
.transition
）然后根据需要添加/删除该类名。不过，我不会在页面加载时将其留在元素选择器（如
nav
）上的元素上。