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 声明中？