How to add closing effect with CSS Keyframe animation dropdown-CodePudding

I am trying to add a close effect with Keyframe css to the dropdown menu. I have succeeded with the opening, but I cannot do the same with the close. If you take a look you see the animation on entry, but on exit the menu simply disappears.

Sorry but I'm relatively new, someone kindly explain to me what I'm doing wrong?

I know that I can achieve the same result also with Javascript, but I would like to obtain the result only with css and understand if this is possible.

Updated Snippet: I was looking for an alternative to visibility property because even with hidden menu I have the "ghost container" in front of other elements. I was thinking about display none to block and keyframe animation, but this did not allow me to add a closing effect. Anyway I kept visibility and solved the "ghost container" with height property.

var usermenu = document.querySelector(".user_menu_button");
function userMenu() {
  var x = document.getElementById("mts_menu");
   if (x.classList.toggle ("show")) {
    usermenu.innerHTML = '<i ></i><span >Account</span>';
}  else {
   usermenu.innerHTML = '<i ></i><span >Account</span>';
   }
}

/*Items menu*/
.user_menu {
    display: flex;
    flex-direction: column;
}

/*Menu header info*/
.display.name {
    font-size: 15px;
    font-weight: 500;
    color: #303238;
}

.display.mail {
    font-size: 13px;
    color: #3d5afe;
}

hr.solid {
    border-top: 1px solid #e0e0e0;
    margin: 10px 0px 10px 0px;
}

/*Text Link css*/
.user_menu.item > a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 8px 0; 
    font-size: 13px;
    color: #75777D;
}

.user_menu.item:hover > a {
    color: #2E323A;
}

/*Icon Button Toggle Menu*/
.user_menu_button {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 100%;
    background: #282c33!important;
    font-weight: 500!important;
    font-size: 13px!important;
}

.icn_button {
    margin: 0;
}

.icn_button:before, .icn_button:after {
    margin: 0;
}

.txt_button {
    margin-left: 10px;
}

/*Icon Items Menu*/
.icn_menu:before, .icon_menu:after {
    margin: 0px;
    padding: 0px;
    font-size: 16px
}

.icn_menu {
    margin-right: 10px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
}


/* User Menu For header website */
.mts_menu_container {
    display: flex;
    flex-direction: column;
    align-content: flex-end;
    align-items: flex-end;
}

.dropdown_box {
    position: absolute;
    margin-top: 17px;
}

.mnu_padding {
    padding: 20px;
}

.mts_dropdown_content {
  background-color: #fff;
  min-width: 160px;
  width: 280px;
  border-radius: 3px;
  overflow-x: hidden;
  overflow-y: hidden;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 999;
  position: relative;
  visibility: hidden;
  opacity: 0;
  top: 50px;
  height: 0;
  transition: visibility 0.2s, max-height 0.2s, opacity 0.2s, top 0.2s, height 0.2s;
}


.mts_dropdown_content.show {
   height: 100%;
   visibility: visible;
   opacity: 1;
   top: 0;
   transition: visibility 0.2s, max-height 0.2s, opacity 0.2s, top 0.2s, height 0.2s;
}

<button onclick="userMenu()" >
     <i ></i>
     <span >Account</span>
</button>

<div >
  <div >
      
   <div id="mts_menu" >
    <div >   
    <div >
        <span >Ciao [display_name]</span>
        <span >[display_email]</span>
    </div>   
      
     <hr >  
     
    <div >
        <a href="/account">
         <i ></i>
         <span >Dashboard</span>
        </a>
    </div>
    
     <div >
        <a href="ordini">
         <i ></i>
         <span >I miei ordini</span>
        </a>
    </div>
    
    <div >
        <a href="libreria">
         <i ></i>
         <span >Downloads</span>
        </a>
    </div>
    
    <div >
        <a href="impostazioni">
         <i ></i>
         <span >Impostazioni</span>
        </a>
    </div>
    
    <div >
        <a href="wp-login.php?action=logout">
         <i ></i>
         <span >Logout</span>
        </a>
        
    </div>
   </div>
   </div> 
  </div>
</div>

Original Snippet

var usermenu = document.querySelector(".user_menu_button");
function userMenu() {
  var x = document.getElementById("mts_menu");
   if (x.classList.toggle ("show")) {
    usermenu.innerHTML = '<i ></i><span >Account</span>';
}  else {
   usermenu.innerHTML = '<i ></i><span >Account</span>';
   }
}

/*Items menu*/
.user_menu {
    display: flex;
    flex-direction: column;
}

/*Menu header info*/
.display.name {
    font-size: 15px;
    font-weight: 500;
    color: #303238;
}

.display.mail {
    font-size: 13px;
    color: #3d5afe;
}

hr.solid {
    border-top: 1px solid #e0e0e0;
    margin: 10px 0px 10px 0px;
}

/*Text Link css*/
.user_menu.item > a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 8px 0; 
    font-size: 13px;
    color: #75777D;
}

.user_menu.item:hover > a {
    color: #2E323A;
}

/*Icon Button Toggle Menu*/
.user_menu_button {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 100%;
    background: #282c33!important;
    font-weight: 500!important;
    font-size: 13px!important;
}

.icn_button {
    margin: 0;
}

.icn_button:before, .icn_button:after {
    margin: 0;
}

.txt_button {
    margin-left: 10px;
}

/*Icon Items Menu*/
.icn_menu:before, .icon_menu:after {
    margin: 0px;
    padding: 0px;
    font-size: 16px
}

.icn_menu {
    margin-right: 10px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
}


/* User Menu For header website */
.mts_menu_container {
    display: flex;
    flex-direction: column;
    align-content: flex-end;
    align-items: flex-end;
}

.dropdown_box {
    position: absolute;
    margin-top: 17px;
}

.mnu_padding {
    padding: 20px;
}

.mts_dropdown_content {
  background-color: #fff;
  min-width: 160px;
  width: 280px;
  border-radius: 3px;
  overflow-x: hidden;
  overflow-y: hidden;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 999;
  position: relative;
  display: none;
  animation: fade_in_hide 0.2s;
}


.mts_dropdown_content.show {
   display: block;
   animation: fade_in_show 0.2s;
}

@keyframes fade_in_show {
     0% {
          opacity: 0;
          top: 50px;
     }

     100% {
          opacity: 1;
          top: 0;
     }
}

@keyframes fade_in_hide {
     0% {
          opacity: 1;
          top: 0;
     }

     100% {
          opacity: 0;
          top: 50px;
     }
}

<button onclick="userMenu()" >
     <i ></i>
     <span >Account</span>
</button>

<div >
  <div >
      
   <div id="mts_menu" >
    <div >   
    <div >
        <span >Ciao [display_name]</span>
        <span >[display_email]</span>
    </div>   
      
     <hr >  
     
    <div >
        <a href="/account">
         <i ></i>
         <span >Dashboard</span>
        </a>
    </div>
    
     <div >
        <a href="ordini">
         <i ></i>
         <span >I miei ordini</span>
        </a>
    </div>
    
    <div >
        <a href="libreria">
         <i ></i>
         <span >Downloads</span>
        </a>
    </div>
    
    <div >
        <a href="impostazioni">
         <i ></i>
         <span >Impostazioni</span>
        </a>
    </div>
    
    <div >
        <a href="wp-login.php?action=logout">
         <i ></i>
         <span >Logout</span>
        </a>
        
    </div>
   </div>
   </div> 
  </div>
</div>

CodePudding user response：

Since you don't want to go the JS route, transitions would be easier here. However, you can't transition display so you'll need to swap that out for visibility and have your menu display set to block from the start and just hide it with visibility and opacity.

var usermenu = document.querySelector(".user_menu_button");

function userMenu() {
  var x = document.getElementById("mts_menu");
  if (x.classList.toggle("show")) {
    usermenu.innerHTML = '<i ></i><span >Account</span>';
  } else {
    usermenu.innerHTML = '<i ></i><span >Account</span>';
  }
}

/*Items menu*/

.user_menu {
  display: flex;
  flex-direction: column;
}


/*Menu header info*/

.display.name {
  font-size: 15px;
  font-weight: 500;
  color: #303238;
}

.display.mail {
  font-size: 13px;
  color: #3d5afe;
}

hr.solid {
  border-top: 1px solid #e0e0e0;
  margin: 10px 0px 10px 0px;
}


/*Text Link css*/

.user_menu.item>a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 8px 0;
  font-size: 13px;
  color: #75777D;
}

.user_menu.item:hover>a {
  color: #2E323A;
}


/*Icon Button Toggle Menu*/

.user_menu_button {
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: #282c33 !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}

.icn_button {
  margin: 0;
}

.icn_button:before,
.icn_button:after {
  margin: 0;
}

.txt_button {
  margin-left: 10px;
}


/*Icon Items Menu*/

.icn_menu:before,
.icon_menu:after {
  margin: 0px;
  padding: 0px;
  font-size: 16px
}

.icn_menu {
  margin-right: 10px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}


/* User Menu For header website */

.mts_menu_container {
  display: flex;
  flex-direction: column;
  align-content: flex-end;
  align-items: flex-end;
}

.dropdown_box {
  position: absolute;
  margin-top: 17px;
}

.mnu_padding {
  padding: 20px;
}

.mts_dropdown_content {
  background-color: #fff;
  min-width: 160px;
  width: 280px;
  border-radius: 3px;
  overflow-x: hidden;
  overflow-y: hidden;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: -1;
  opacity: 0;
  top: 50px;
  position: relative;
  display: block;
  visibility: none;
  transition: opacity, top, 0.2s linear;
}

.mts_dropdown_content.show {
  opacity: 1;
  top: 0px;
  z-index: 999;
  visibility: visible;
  transition: opacity, top, 0.2s linear;
}

@keyframes fade_in_show {
  0% {
    opacity: 0;
    top: 50px;
  }
  100% {
    opacity: 1;
    top: 0;
  }
}

@keyframes fade_in_hide {
  0% {
    opacity: 1;
    top: 0;
  }
  100% {
    opacity: 0;
    top: 50px;
  }
}

<button onclick="userMenu()" >
  <i ></i>
  <span >Account</span>
</button>

<div >
  <div >

    <div id="mts_menu" >
      <div >
        <div >
          <span >Ciao [display_name]</span>
          <span >[display_email]</span>
        </div>

        <hr >

        <div >
          <a href="/account">
            <i ></i>
            <span >Dashboard</span>
          </a>
        </div>

        <div >
          <a href="ordini">
            <i ></i>
            <span >I miei ordini</span>
          </a>
        </div>

        <div >
          <a href="libreria">
            <i ></i>
            <span >Downloads</span>
          </a>
        </div>

        <div >
          <a href="impostazioni">
            <i ></i>
            <span >Impostazioni</span>
          </a>
        </div>

        <div >
          <a href="wp-login.php?action=logout">
            <i ></i>
            <span >Logout</span>
          </a>

        </div>
      </div>
    </div>
  </div>
</div>