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

Question

我有一个带有过渡 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 类然后被删除。

这是为什么？

Answer 1

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