Css Keyframe animation opacity get flashing when click on dropdown menu-CodePudding

After several attempts to add a simple in / out animation with opacity, I got the result I wanted. However, the animation is causing unwanted flashes.

If you switch from one item to another you will notice that the content will flash for a moment. What am I doing wrong ?

Also, is there a "cleaner" and shorter way to achieve the same effect?

var dropdownBtn = document.querySelectorAll('.menu-btn');

dropdownBtn.forEach(btn => btn.addEventListener('click', function() {
  var menuContent = this.nextElementSibling;
  closeMenusExcept(menuContent);
  if (!menuContent.classList.contains("show")) {
      menuContent.classList.add("show");
  } else {
    menuContent.classList.add("hide");
    setTimeout(function(){
     menuContent.classList.remove("show");
     menuContent.classList.remove("hide");  
    },100)
    } 
}));

function closeMenusExcept(menuContent) {
  dropdownBtn.forEach((element) => {
    if (menuContent !== element.nextElementSibling) {
      element.nextElementSibling.classList.remove("show");
      element.nextElementSibling.classList.add("hide");
    }
  })
}

.menu-btn {
  background: #e0e0e0;
  padding: 10px;
  margin: 5px 0px 0px 0px;
}

.menu-btn:hover {
  background: #000;
  color: #fff;
}

.drop_container {
  display: none;
  background-color: #fff;
  animation:animateFromBottom 0.3s
  
}

.drop_container.show {
  display: block;
}

.drop_container.hide {
  animation:animateToBottom 0.3s;
}

.drop_container > .item {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  padding: 10px 0px 0px 0px;
}

@keyframes animateFromBottom {
    from{opacity:0} 
    to{opacity:1}
}

@keyframes animateToBottom {
  from{opacity:1} 
  to{opacity:0}
}

<div >

<div >One</div>
<div >
  <a  href="#">Contact Us</a>
  <a  href="#">Visit Us</a>
</div>

<div >Two</div>
<div >
  <a  href="#">Contact Us</a>
  <a  href="#">Visit Us</a>
</div>

</div>

CodePudding user response：

You need to swap opacity for max-height, here is your solution: https://codepen.io/nitinsuri/pen/bGLrLQB

var dropdownBtn = document.querySelectorAll('.menu-btn');

dropdownBtn.forEach(btn => btn.addEventListener('click', function() {
  var menuContent = this.nextElementSibling;
  closeMenusExcept(menuContent);
  if (!menuContent.classList.contains("show")) {
      menuContent.classList.add("show");
  } else {
    menuContent.classList.add("hide");
    setTimeout(function(){
     menuContent.classList.remove("show");
     menuContent.classList.remove("hide");  
    },100)
    } 
}));

function closeMenusExcept(menuContent) {
  dropdownBtn.forEach((element) => {
    if (menuContent !== element.nextElementSibling) {
      element.nextElementSibling.classList.remove("show");
      element.nextElementSibling.classList.add("hide");
    }
  })
}

.menu-btn {
  background: #e0e0e0;
  padding: 10px;
  margin: 5px 0px 0px 0px;
}

.menu-btn:hover {
  background: #000;
  color: #fff;
}

.drop_container {
  background-color: #fff;
  
    max-height: 0;
    overflow: hidden;
  
}

.drop_container.show {
    max-height: 100vh;
  animation:animateFromBottom 1s;
}

.drop_container > .item {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  padding: 10px 0px 0px 0px;
}

@keyframes animateFromBottom {
    from{
    max-height: 0;
    overflow: hidden;} 
    to{max-height: 100vh;}
}

@keyframes animateToBottom {
    from{max-height: 100vh;}
  to{
    max-height: 0;
    overflow: hidden;} 
}

<div >

<div >One</div>
<div >
  <a  href="#">fist link of One</a>
  <a  href="#">second link of One</a>
</div>

<div >Two</div>
<div >
  <a  href="#">fist link of Two</a>
  <a  href="#">second link of Two</a>
</div>

</div>

CodePudding user response：

In Jquery you can approach it this way. you can either use toggle or slide toggle put slow or fast however you want it. I just added some new class so your css wont get affected. Let me know If this is what you are looking at.

$(document).ready(function(){
  $(".btn1").click(function(){
   $(".container1").slideToggle();
    $(".container2").hide("slow");
  });
   $(".btn2").click(function(){
    $(".container2").slideToggle();
      $(".container1").hide("slow");
  });
});

.menu-btn {
  background: #e0e0e0;
  padding: 10px;
  margin: 5px 0px 0px 0px;
}

.menu-btn:hover {
  background: #000;
  color: #fff;
}

.drop_container {
  display: none;
  background-color: #fff;
  animation:animateFromBottom 0.3s
  
}

.drop_container.show {
  display: block;
}

.drop_container.hide {
  animation:animateToBottom 0.3s;
}

.drop_container > .item {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  padding: 10px 0px 0px 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div >

<div >One</div>
<div >
  <a  href="#">Contact Us</a>
  <a  href="#">Visit Us</a>
</div>

<div >Two</div>
<div >
  <a  href="#">Contact Us</a>
  <a  href="#">Visit Us</a>
</div>

</div>