JAVASCRIPT - Animate block to disappear like it does when it appear

Question

I need some help with my side navigation that appears real nicely when i click a button, but when i try to remake the same code just to make it disappear it just vanish in a second instead of slowly disappearing into the left side of the screen like when it appears... Anyone here there can help me to script my close function to do this?

<nav class="w3-sidenav w3-dark-grey w3-card-2 w3-animate-left"    style="display:none;z-index:2">
      <a href="javascript:void(0)" 
      onclick="w3_close()"
      class="w3-closenav w3-jumbo w3-text-teal">&times;</a>
      <a href="javascript:void(0)">Link 1</a>       
      <a href="javascript:void(0)">Link 2</a>       
      <a href="javascript:void(0)">Link 3</a>       
      <a href="javascript:void(0)">Link 4</a>       
      <a href="javascript:void(0)">Link 5</a>       
    </nav>

.w3-animate-left{
position:relative;-webkit-animation-name:animateleft;-webkit-animation-duration:0.6s;animation-name:animateleft;animation-duration:0.6s}
@-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}}

    <script>
function w3_open() {
    document.getElementsByClassName("w3-sidenav")[0].style.width = "300px";
    document.getElementsByClassName("w3-sidenav")[0].style.textAlign = "center";
    document.getElementsByClassName("w3-sidenav")[0].style.fontSize = "40px";
    document.getElementsByClassName("w3-sidenav")[0].style.paddingTop = "10%";
    document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
}
function w3_close() {
    document.getElementsByClassName("w3-sidenav")[0].style.width = "0px";
    document.getElementsByClassName("w3-sidenav")[0].style.textAlign = "center";
    document.getElementsByClassName("w3-sidenav")[0].style.fontSize = "40px";
    document.getElementsByClassName("w3-sidenav")[0].style.paddingTop = "0%";
    document.getElementsByClassName("w3-sidenav")[0].style.display = "block";    
}
</script>

score 1 · Answer 1 · edited May 23 '17 at 12:31

The easiest solution here is to use the CSS transitions and not the CSS animations. As the names implies, the transition describe how to pass from state A (hidden) to state B (visible), the animation is just to show an animation but not for switching states.

I also changed a bit you HTML because to put javascript:void(0) in the href is wrong. See this codepen I made some days ago for the alternatives solutions.

The onclick attribute is also a bad idea, that's why I added an event listener in the JS.

(function(){
  "use strict";

  var nav = document.querySelector('.w3-sidenav');
  function toggleNav(){
    if(nav.className.indexOf('hidden') > -1){
      nav.className = nav.className.replace(' hidden', '');
    }
    else {
      nav.className += ' hidden'
    }
  }


  document
  .querySelector('.w3-closenav')
  .addEventListener("click", function(e){
    e.preventDefault();
    toggleNav()
  })

  document
  .querySelector('.toggleNav')
  .addEventListener("click", function(e){
    e.preventDefault();
    toggleNav()
  })

})()

/**
 *The visible state
 */
.w3-animate-left {
  position: relative;

  left: 0;
  opacity: 1;

  transition-property: left, opacity;
  transition-duration: 0.6s;
}

/**
 * The hiden state
 */
.w3-animate-left.hidden{
  left: -300px;
  opacity: 0;
}

<!-- I added a link to toggle the navigation -->
<a href="#!" class="toggleNav">Toggle Navigation</a>
<nav class="w3-sidenav w3-dark-grey w3-card-2 w3-animate-left hidden" style="z-index:2">
    <a href="#!" class="w3-closenav w3-jumbo w3-text-teal">&times;</a>
    <a href="#!">Link 1</a>
    <a href="#!">Link 2</a>
    <a href="#!">Link 3</a>
    <a href="#!">Link 4</a>
    <a href="#!">Link 5</a>
</nav>

JAVASCRIPT - Animate block to disappear like it does when it appear

1 Answers1