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

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