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宣言にトランジションを入れてみませんか？