Why does transition in work while transition out doesn't even with ese-in-out?

Question

I'm currently trying to code the apple home webpage and I'm having issues with the drop-menu transition. I'm trying to add transition to the drop down so it will be ease-in-out. However, only the transition in is visually pleasing (at least to an acceptable minimum), on the other hand the transition out is not working properly, it looks rushed, and maybe the transition is not working on the way out.

here is my css:

.drop-down {
        position: fixed;
        z-index: 1;
        width: 100%;
        height: 94%;
        opacity: 0%;
        margin-top: 6%;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: rgba(22, 22, 23, 0.325);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        transition: opacity 0.3s ease-in-out .0.3s, backdrop-filter 0.3s ease-in-out 0.3s;
        overflow-y: hidden;
    }
     .gen-drop-2 {
        height: 0;
        width: 100%;
    }
    .drop-down-str {
        width: 100%;
        max-height: 0%;
        background-color: rgba(22, 22, 23, 0.982);
        transition: max-height 0.3s ease-in-out 0.2s;
        overflow-y: hidden;
    }
    .str-txt {
        width: 100%;
        display: flex;
        flex-direction: row;
        font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
        max-height: 0;
        opacity: 0;
        overflow-y: hidden;
        padding: 0;
        transition: opacity 0.3s ease-in-out 0.1s;
    }
    #str{
        padding: 0;
        border: 1px solid red;
        margin-right: 3em;
        transition: margin-right 0.3s ease-in-out 0.3s, opacity 0.3s ease-in-out 0.3s, line-height 0.3 ease-in-out 0.3s;
        overflow-y: hidden;
    }
    .str1 {
        margin-right: 4em;
        font-size: 24px;
        font-weight: 600;
        color: grey;
    }
    #str-li-1 {
        margin-bottom: 13px;
      transition: margin-bottom 0.3s ease-in-out 0.4s;
    }
    .str1 ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        color: white;
    }

My HTML:

<div class="drop-down">
                <div class="drop-down-str">
                    <div class="str-txt">
                        <div class="str1" id="str">
                            <small style="margin-bottom: 3em;">Shop</small>
                            <ul>
                                <li id="str-li-1">Shop the Latest</li>
                                <li id="str-li-1">Mac</li>
                                <li id="str-li-1">iPad</li>
                                <li id="str-li-1">iPhone</li>
                                <li id="str-li-1">Apple Watch</li>
                                <li id="str-li-1">Apple Vision Pro</li>
                                <li id="str-li-1">Accessories</li>
                            </ul>
                        </div>
                        <div class="str2" id="str"></div>
                        <div class="str3" id="str"></div>
                    </div>
                </div>
                 /* I'm using gen-drop 2 as for shrink event stated in my JS, it is the section below the drop-down menu's main content */ 
                <div class="gen-drop-2"></div>

    /*other drop-down menus for the other items on the page navigation bar
    ... 
    */
</div>

My JS:

const store = document.querySelector(".store");
const dropD = document.querySelector(".drop-down");
const dropDStr = document.querySelector(".drop-down-str");
const genDrop2 = document.querySelector(".gen-drop-2");
const nav = document.querySelector(".Nav");
const appl = document.querySelector(".appleLogo");
const strTxt = document.querySelector(".str-txt");
const strLi = document.querySelectorAll("#str-li-1");

//function used in displaying the drop-down menu
function grow() {
  dropDStr.style.maxHeight = "100%";
  genDrop2.style.height = "100vh";
  dropD.style.opacity = '100%';
  dropD.style.backdropFilter = "blur(10px)";
  nav.style.background = "rgba(22, 22, 23, 0.982)";
  strTxt.style.opacity = '100%';
  strTxt.style.maxHeight = '100%';
  strTxt.style.paddingLeft = 'calc((100vw - 1035px) / 2 + 17px)';
  strTxt.style.paddingTop = '44px'
  strTxt.style.paddingBottom = 'calc(6em - 19px)';
  strLi.forEach((Element) => {
    Element.style.marginBottom = '19px';
  })
}

//function used in hiding the drop-down menu
function shrink() {
  dropDStr.style.maxHeight = "0";
  genDrop2.style.height = "0";
  dropD.style.opacity = '0%';
  dropD.style.backdropFilter = "blur(2px)";
  nav.style.background = "rgba(22, 22, 23, .8)";
  strTxt.style.opacity = '0%';
  strTxt.style.maxHeight = '0';
  strTxt.style.padding = '0';
  strLi.forEach((Element) => {
    Element.style.marginBottom = '13px';
  })
}
// events used to change/revert drop-down menu based on mouse activities
store.addEventListener('mouseenter', grow);
genDrop2.addEventListener('mouseenter', shrink);
appl.addEventListener('mouseenter', shrink);

window.addEventListener('mouseout', (event) => {
  const toElement = event.toElement || event.relatedTarget;
  if (!toElement || toElement.nodeName === 'HTML') {
    shrink();
  }
});
window.addEventListener('scroll', (event) => {
  const toElement = event.toElement || event.relatedTarget;
  if (!toElement || toElement.nodeName === 'HTML') {
    shrink();
  }
})

Problem gif Yes, I am aware that I code with a baby brain, forgive me I'm a newbie. The transition is not working right but I want it to be like the one on the Apple webpage. Here is a link to the video I uploaded showing the issue in case the gif is not enough. The one with the red border is my page, for easy identification.

Answer 1

You seem to have a syntax error in your .drop-down CSS opacity 0.3s ease-in-out .0.3s (extra dot).

To animate max-height you need fixed units. This is usually set to some high number to make sure the content is never cut off, but if the number is too high the returning transition seemingly happens too quickly, because it traverses a large space and transition duration time is distributed across that space.

Using CSS Transitions on Auto Dimensions

In your case change the maxHeight to a fixed unit large number:

dropDStr.style.maxHeight = "1000px";

To help with the time duration mismatch because your actual height will be much smaller than the maxHeight you can modify the easing function to something like:

// close slide-out, in grow()
transition-timing-function: cubic-bezier(0, 1, 0, 1);

// open slideout, in shrink()
transition-timing-function: cubic-bezier(1, 0, 1, 0);