W3 CSS Анимация

Question

Я чувствую себя глупым, спрашивая об этом. Начнем с того, что я использовал W3-отзывчивый шаблон. Я обожаю все это и даже включил одноразовый дизайн приложения, используя AngularJS. Теперь вот мой вопрос.

Когда кто-либо, находящийся на мобильном устройстве с использованием веб-сайта, получает опцию меню, которая открывает 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; 
    } 
} 

Тогда я столкнулся с другим препятствием, то DIV, содержащий класс призыв к CSS выше включает его в классе, как показано ниже.

<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, что я хотел, как я был бы в состоянии включить его так, что когда они нажимают, чтобы закрыть, это пользовательская анимация, которую я задал?

Также как я могу добавить его, что если они щелкнут где-нибудь на экране, он выйдет на сторону nav? Заранее спасибо!

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.

Надеюсь, это поможет. Ура!