Toggle a reverse animation when a button is clicked the second time

Question

I am looking to animate a menu.The menu button is a div which has an animation as well with a click event. I succesfully got the menu to beatifully appear on the screen, but i can't get it to leave it as well, preferably with the same, but reversed, animation. This is my html:

<div class="dropdown-meniu">
    <div class="buton-meniu" onclick="myFunction(this)">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
    </div>
    <div id="myDropdown" class="dropdown-meniu-content">
        <p>TEST</p>
    </div>
</div>

I have used for the moment the solution that W3 Schools provides for the dropdown, as well for the animation of the button. This is the styling of the menu and the animation:

.dropdown-meniu-content {
    display: none;
    position: fixed;
    background-color: #696969;
    width: 35%;
    max-width: 500px;
    height: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    overflow: hidden;
    right: 0;
    animation-name: slideIn-meniu;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-name: slideIn-meniu;
    animation-duration: 0.6s;
}

@keyframes slideIn-meniu {
    from { transform: translateX(100%); opacity: 0.5;  }
    to { margin-right: 0px; opacity: 1; } 
}

.show {
    display:block;
}

If it is necessary, I will post the other CSS. For the script, I have used jQuery and javascript for the two animations(I am a noob at JavaScript/jQuery so I couldn't get it to work with only JavaScript/jQuery alone and I know that jquery is slow to load but I am using it for other things).

Thank you in advance!

EDIT: This is the jsFiddle: https://jsfiddle.net/Lfv7qL7z/3/ .

Answer 1

Your issue is that you are trying to animate between display: none and display: block which doesn't work. You need to hide the element in some other manner, like a negative offset, and then animate it to be visible.

Modify your .dropdown-meniu-content rule to start offscreen and to have a transition property. Then have .show reset the transform back to translateX(0%) :

 function myFunction(x) { x.classList.toggle("change"); document.getElementById("myDropdown").classList.toggle("show"); } 

 html, body { margin: 0px; padding: 0px; max-width: 100%; } .wrapper { height: 110px; width: 100%; max-width: 10000px; background-color: rgb(206, 206, 206, 0.2); } .logo { float: left; margin-top: 10px; margin-left: 5px; width: 200px; height: 100px; } .meniu { float: right; width: auto; } .buton-meniu { display: block; cursor: pointer; width: 35px; margin-right: 30px; margin-top: 40px; } .bar1, .bar2, .bar3 { width: 35px; height: 5px; background-color: #333; margin: 6px 0; transition: 0.4s; } .change .bar1 { -webkit-transform: rotate(-45deg) translate(-9px, 6px); transform: rotate(-45deg) translate(-9px, 6px); } .change .bar2 { opacity: 0; } .change .bar3 { -webkit-transform: rotate(45deg) translate(-8px, -8px); transform: rotate(45deg) translate(-8px, -8px); } .dropdown-meniu { position: relative; display: inline-block; } .dropdown-meniu-content { top: 110px; position: fixed; background-color: #696969; width: 30%; max-width: 10000px; height: 100%; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; overflow: hidden; right: 0; transform: translateX(100%); transition: transform 1s ease; animation-name: slideIn-meniu; -webkit-animation-duration: 0.6s; -webkit-animation-name: slideIn-meniu; animation-duration: 0.75s; } @keyframes slideIn-meniu { from { transform: translateX(100%); opacity: 0.5; } to { margin-right: 0px; opacity: 1; } } .show { transform: translateX(0%); } 

  <div class="meniu"> <div class="dropdown-meniu"> <div class="buton-meniu" onclick="myFunction(this)"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </div> <div id="myDropdown" class="dropdown-meniu-content"> <p>TEST </p> </div> </div> </div> 

Answer 2

Not exactly sure what you need, but maybe something like this? I pulled out the display: none and stripped down the animations a bit.

HTML

   <div class="dropdown-meniu">
    <div class="buton-meniu" onclick="myFunction(this)">
      <div class="bar1">Click Me</div>
      <div class="bar2"></div>
      <div class="bar3"></div>
    </div>
    <div id="myDropdown" class="dropdown-meniu-content hide">
      <p>TEST</p>
    </div>
  </div>

CSS

    .dropdown-meniu-content {
   /*      display: none; */
        position: fixed;
        background-color: #696969;
        width: 35%;
        max-width: 500px;
        height: 100%;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
        overflow: hidden;
        right: 0;

    }
    @keyframes slideIn-meniu {
        from { opacity: 0.5;  }
        to { opacity: 1; } 
    }
    @keyframes slideOut-meniu {
        from { opacity: 1;  }
        to { opacity: 0.5; } 
    }
    .show {
        display:block;
        right: 0;
        transition: right 0.6s;

        -webkit-animation-duration: 0.6s;
        -webkit-animation-name: slideIn-meniu;
        animation-duration: 0.6s ease;
    }
    .hide {
      right: -35%;
      transition: right 0.6s ease;
      display: block;
       -webkit-animation-duration: 0.6s;
       -webkit-animation-name: slideOut-meniu;
        animation-duration: 0.6s ease;
    }

jQuery

$('.bar1').click(function(){
 $('.dropdown-meniu-content').toggleClass('show').toggleClass('hide');
})

https://jsfiddle.net/282vpcm2/15/