为什么在使用 ese-in-out 时，过渡有效，而过渡出却不起作用？

Question

我目前正在尝试对苹果主页进行编码，但我在下拉菜单转换方面遇到了问题。我正在尝试向下拉列表添加过渡，以便它可以缓入缓出。然而，只有过渡在视觉上令人愉悦（至少达到可接受的最低限度），另一方面，过渡不能正常工作，看起来很匆忙，而且也许过渡在退出时不起作用。

这是我的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;
    }

我的 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>

我的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();
  }
})

是的，我知道我用婴儿的大脑编码，请原谅我是一个新手。过渡效果不太好，但我希望它像 Apple 网页上的那样。 这是我上传的视频的链接，该视频显示了该问题，以防 gif 不够。 红框的是我的页面，方便识别。

Answer 1

您的 .drop-down CSS 中似乎存在语法错误

opacity 0.3s ease-in-out .0.3s

（额外的点）。

要设置最大高度动画，您需要固定单位。通常将其设置为某个较高的数字，以确保内容永远不会被切断，但如果数字太高，返回的过渡似乎发生得太快，因为它穿过一个很大的空间，并且过渡持续时间分布在该空间上。

在自动尺寸上使用 CSS 过渡

在您的情况下，将 maxHeight 更改为固定单位大数：

dropDStr.style.maxHeight = "1000px";

为了帮助解决持续时间不匹配的问题，因为您的实际高度将远小于 maxHeight，您可以将缓动函数修改为如下所示：

// 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);