W3 CSS Animation

Question

私はこれを聞いて気が気になりません。私はW3応答テンプレートを使って始めましょう。 AngularJSを使用して、すべてのことが大好きで、単一ページのアプリケーション設計の側面を組み込んでいます。今私の1つの質問があります。

ウェブサイトを使用しているモバイルデバイスにいる人は誰でも、sidenavを開くメニューオプションが表示されます。このアニメーションは「w3-animate-left」と呼ばれ、以下のように-300pxから0pxにナビを引っ張ります。今私がしたいことは、0pxから-300pxにアニメーション化し、それを私の既存のCSSに組み込むことです。

.w3-animate-left { 
    position: relative; 
    -webkit-animation: animateleft 0.4s; 
    animation: animateleft 0.4s; 
} 
@-webkit-keyframes animateleft { 
    from { 
     left: -300px; 
     opacity: 0; 
    } 
    to { 
     left: 0; 
     opacity: 1; 
    } 
} 
@keyframes animateleft { 
    from { 
     left: -300px; 
     opacity: 0; 
    } 
    to { 
     left: 0; 
     opacity: 1; 
    } 
} 

私は別の障害に遭遇しました。上記のCSSへのクラス呼び出しを含むdivは、以下のようにクラスに組み込みます。ここで

<div class="w3-sidenav w3-white w3-card-2 w3-animate-left w3-hide-medium w3-hide-large" style="display:none" id="mySidenav" ng-controller="mainController"> 
    <a href="" ng-click="redirectToPackages()" onclick="w3_close()"><i class="fa fa-birthday-cake"></i> PACKAGES</a> 
    <a href="" ng-click="redirectToOpenPlay()" onclick="w3_close()"><i class="fa fa-child"></i> OPEN PLAY</a> 
    <a href="" ng-click="redirectToGallery()" onclick="w3_close()"><i class="fa fa-camera-retro"></i> GALLERY</a> 
    <a href="" ng-click="redirectToContact()" onclick="w3_close()"><i class="fa fa-envelope"></i> CONTACT</a> 
</div> 

は、同様のJavaScriptです：

<script> 
    // Toggle between showing and hiding the sidenav when clicking the menu icon 
    var mySidenav = document.getElementById('mySidenav'); 

    function w3_open() { 
     if (mySidenav.style.display === 'block') { 
      mySidenav.style.display = 'none'; 
     } else { 
      mySidenav.style.display = 'block'; 
     } 
    } 
    function w3_close() { 
     mySidenav.style.display = 'none'; 
    } 
</script> 

は、今ここでの問題は、どのように私はそのようにするときにそれを組み込むことができるだろう、私は私が欲しかったW3のCSSを編集をした場合であってもです彼らは閉じるためにクリックし、私が尋ねたカスタムアニメーションをやりますか？

また、画面のどこかをクリックしてサイドナビゲーターを終了すると、追加することはできますか？前もって感謝します！

Answer 1

var _open = document.getElementById("open"), 
 
    _navigation = document.getElementById("navigation"); 
 

 
_open.onclick = function() { 
 
    _navigation.classList.toggle("openNav"); 
 
}

* { 
 
    margin: 0; 
 
    padding: 0; } 
 

 
#open { 
 
    position: absolute; 
 
    right: 0; 
 
    cursor: pointer; } 
 

 
#navigation { 
 
    background: black; 
 
    width: 300px; 
 
    height: 100vh; 
 
    transform: translateX(-300px); 
 
    transition: all 0.3s linear; } 
 

 
#navigation.openNav { 
 
    transform: translateX(0); }

<a id="open">Open/Close</a> 
 

 
<div id="navigation"></div>

これは、誰かの作品をもとに、ナビゲーションのアニメーションを作成していないの私の方法です。これは古いブラウザでは機能しません。

必要な手法は、トランスフォーム、トランジション、および追加のクラスです。アニメーションを使用する必要はありません。

openNavのクラスを追加すると、transform：translateXの値が変更され、ブラウザにナビゲーションが表示されます。

cssで表示属性をアニメーション表示できないことに注意してください。 fadeIn/fadeOutには不透明度を使用できます。

希望します。乾杯！