「メニュー」から「閉じる」をテキスト移行

Question

私は、彼らが「クローズ」のテキストで「メニュー」のテキストを置き換えきちんとメニュートランジション効果、出くわしたが、私はこのサイト上でそれを発見しました。 com。これはモバイルで発生します。 同様に、私は上記の効果のGIFを持っています。私は彼らが持っているのと同じ正確な効果を再現しようとしています。

どのように私はこれを行うかもしれません知っていますか？私はこれをHTML、CSS、Javascript/jQueryを使って行いたいと思います。

私は表示するコードがありません。 JavascriptとjQueryの知識が不足しているため。したがって、私は何が起こっているのか、どのような効果/移行がそれをするのかを記述する方法を知りません。

Answer 1

あなたがウェブサイトを知っているとすれば、同じ効果が必要です。要素を調べて、htmlとそのcssをコピーするだけです。次に、要素をクリックしてJSを適用するかどうかを知るために何が起こるかを観察します。

これは文字通りソースコードからコピーされています。私に尋ねるとかなりシンプル（.com）です。

$(function() { 
 
    $('.mobile-toggle').on('click', function() { 
 
    $(this).toggleClass('active'); 
 
    }); 
 
});

.mobile-toggle { 
 
    background: #0d97ff; 
 
    border: 2px solid #0d97ff; 
 
    color: #ffffff; 
 
    display: inline-block; 
 
    float: right; 
 
    font-size: 14px; 
 
    font-family: "CalibreBold", helvetica, sans-serif; 
 
    height: 34px; 
 
    letter-spacing: 1.2px; 
 
    line-height: 30px; 
 
    overflow: hidden; 
 
    padding: 0 25px; 
 
    position: relative; 
 
    width: 85px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    -webkit-transition: background 0.3s cubic-bezier(0.49, 0.99, 0.54, 0.98); 
 
    -moz-transition: background 0.3s cubic-bezier(0.49, 0.99, 0.54, 0.98); 
 
    -ms-transition: background 0.3s cubic-bezier(0.49, 0.99, 0.54, 0.98); 
 
    transition: background 0.3s cubic-bezier(0.49, 0.99, 0.54, 0.98); 
 
} 
 

 
.mobile-toggle.active { 
 
    background: #fff; 
 
    color: #0d97ff; 
 
    -webkit-transition: background 0.3s cubic-bezier(0.49, 0.99, 0.54, 0.98); 
 
    -moz-transition: background 0.3s cubic-bezier(0.49, 0.99, 0.54, 0.98); 
 
    -ms-transition: background 0.3s cubic-bezier(0.49, 0.99, 0.54, 0.98); 
 
    transition: background 0.3s cubic-bezier(0.49, 0.99, 0.54, 0.98); 
 
} 
 

 
.mobile-toggle .toggle-labels { 
 
    display: block; 
 
    position: absolute; 
 
    height: 68px; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    -webkit-transform: translateY(0); 
 
    -moz-transform: translateY(0); 
 
    -ms-transform: translateY(0); 
 
    transform: translateY(0); 
 
    -webkit-transition: all 0.2s cubic-bezier(0.49, 0.99, 0.54, 0.98); 
 
    -moz-transition: all 0.2s cubic-bezier(0.49, 0.99, 0.54, 0.98); 
 
    -ms-transition: all 0.2s cubic-bezier(0.49, 0.99, 0.54, 0.98); 
 
    transition: all 0.2s cubic-bezier(0.49, 0.99, 0.54, 0.98); 
 
} 
 

 
.mobile-toggle.active .toggle-labels { 
 
    -webkit-transform: translateY(-34px); 
 
    -moz-transform: translateY(-34px); 
 
    -ms-transform: translateY(-34px); 
 
    transform: translateY(-34px); 
 
    -webkit-transition: all 0.2s cubic-bezier(0.49, 0.99, 0.54, 0.98); 
 
    -moz-transition: all 0.2s cubic-bezier(0.49, 0.99, 0.54, 0.98); 
 
    -ms-transition: all 0.2s cubic-bezier(0.49, 0.99, 0.54, 0.98); 
 
    transition: all 0.2s cubic-bezier(0.49, 0.99, 0.54, 0.98); 
 
} 
 

 
.mobile-toggle .toggle-labels .menu { 
 
    display: block; 
 
    height: 34px; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
} 
 

 
.mobile-toggle .toggle-labels .close { 
 
    display: block; 
 
    height: 34px; 
 
    left: 0; 
 
    top: 100%; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" class="mobile-toggle"> 
 
    <span class="toggle-labels"> 
 
\t \t <span class="menu">Menu</span> 
 
    <span class="close">Close</span> 
 
    </span> 
 
</a>