CSS 过渡不适用于 height 属性

Posted 2023-05-06

技术标签:

【中文标题】CSS 过渡不适用于 height 属性【英文标题】：CSS Transition doesn't work on height property 【发布时间】：2021-10-23 03:11:16 【问题描述】：

所以我在点击时进行菜单交互，如果你想看一下，这是我的代码 sn-p。

let btn = document.querySelector('.trigger');
let icons = document.querySelector('.icons');
let labels = document.querySelector('.labels');
btn.onclick = function() 
  icons.classList.toggle('active');
  labels.classList.toggle('active');

body 
  background: #222;


.trigger 
  cursor: pointer;


nav 
  position: absolute;
  top: 30px;
  right: 30px;
  color: #222;


nav ul.icons 
  background: #fff;
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 60px;
  transition: 1s ease;


nav ul.icons:hover 
  height: 100%;


nav ul li 
  list-style: none;

<html lang="en">

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>

<body>
  <nav>
    <ul class="icons">
      <li class="trigger">
        <i class="fas fa-bars"></i>
      </li>
      <li><i class="fas fa-home"></i></li>
      <li><i class="fas fa-users"></i></li>
      <li><i class="fas fa-concierge-bell"></i></li>
      <li><i class="fas fa-pen"></i></li>
      <li><i class="fas fa-phone-alt"></i></li>
    </ul>
  </nav>
</body>

</html>

我遇到的问题是，transition 属性不能很好地与 CSS 中的高度一起使用。是否有我没有注意到的问题，是否有快速解决方法？

【问题讨论】：

首先，您的 css 中没有任何 active 类。那你想达到什么目的？？ @KunalTanwar 说了什么。此外，当您创建 .active 类时，您需要设置准确的 height 值才能使转换生效。 @KunalTanwar 单击菜单按钮时将出现活动类，顺便说一下它在javascript中。 【参考方案1】：

所以问题是您尝试将高度转换为 100% - 但 CSS 无法立即处理。

快速但有问题的解决方案： 您可以将 :hover 中的高度设置为固定量，例如100 像素。但是，如果您想在其中添加一个新项目或更改项目的大小，则必须手动调整高度。

我会做什么： 首先，我会稍微重构一下 HTML 并将触发器移出项目列表：

<nav>
    <button class="trigger">
        <i class="fas fa-bars"></i>
    </button>
    <ul class="icons fas-container">
        <li><i class="fas fa-home"></i></li>
        <li><i class="fas fa-users"></i></li>
        <li><i class="fas fa-concierge-bell"></i></li>
        <li><i class="fas fa-pen"></i></li>
        <li><i class="fas fa-phone-alt"></i></li>
    </ul>
</nav>

然后我会调整 .icons 的 CSS：（移除高度，添加最大高度并调整过渡）

nav ul.icons 
    background: #fff;
    width: 60px;
    overflow: hidden;
    border-radius: 60px;

    max-height: 0;
    transition: max-height 0.2s ease-out;

最后，我会让 JavaScript 负责获得正确的最大高度。悬停时：

let btn = document.querySelector('.trigger');
let icons = document.querySelector('.icons');
btn.onmouseover = function () 
    icons.style.maxHeight = icons.scrollHeight + "px";

btn.onmouseout = function () 
    icons.style.maxHeight = null;

或点击（如果您愿意的话）：

let btn = document.querySelector('.trigger');
let icons = document.querySelector('.icons');

btn.onclick = function() 
    if (icons.style.maxHeight)
        icons.style.maxHeight = null;
     else 
        icons.style.maxHeight = icons.scrollHeight + "px";

这里有一些（可能）有用的链接：

https://www.w3schools.com/howto/howto_js_collapsible.asp How can I transition height: 0; to height: auto; using CSS? https://codepen.io/felipefialho/pen/ICkwe

片段：

let btn = document.querySelector('.trigger');
    let icons = document.querySelector('.icons');
    btn.onmouseover = function () 
        icons.style.maxHeight = icons.scrollHeight + "px";
    
    btn.onmouseout = function () 
        icons.style.maxHeight = null;

body 
        background: #222;
    

    .trigger 
        cursor: pointer;
    

    nav 
        position: absolute;
        top: 30px;
        right: 30px;
        color: #222;
    

    nav ul.icons 
        background: #fff;
        width: 60px;
        overflow: hidden;
        border-radius: 60px;

        max-height: 0;
        transition: max-height 0.2s ease-out;
    

    nav ul.icons:hover 
        height: 100%;
    

    nav ul li 
        list-style: none;

<html lang="en">

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>

<body>
<nav>
    <button class="trigger">
        <i class="fas fa-bars"></i>
    </button>
    <ul class="icons fas-container">
        <li><i class="fas fa-home"></i></li>
        <li><i class="fas fa-users"></i></li>
        <li><i class="fas fa-concierge-bell"></i></li>
        <li><i class="fas fa-pen"></i></li>
        <li><i class="fas fa-phone-alt"></i></li>
    </ul>
</nav>
</body>

</html>

【讨论】：

【参考方案2】：

“高度”属性的 CSS 过渡只有在指定两个值（开始和结束）时才起作用。

您可以通过使用“max-height”而不是“height”来解决这个问题。这样您就可以安全地超过元素在过渡结束时应具有的确切高度。

let btn = document.querySelector('.trigger');
let icons = document.querySelector('.icons');
let labels = document.querySelector('.labels');
btn.onclick = function() 
  icons.classList.toggle('active');
  labels.classList.toggle('active');

body 
  background: #222;


.trigger 
  cursor: pointer;


nav 
  position: absolute;
  top: 30px;
  right: 30px;
  color: #222;


nav ul.icons 
  background: #fff;
  width: 60px;
  max-height: 60px;
  overflow: hidden;
  border-radius: 60px;
  transition: max-height 1s ease;


nav ul.icons:hover 
  max-height: 120px;


nav ul li 
  list-style: none;

<html lang="en">

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>

<body>
  <nav>
    <ul class="icons">
      <li class="trigger">
        <i class="fas fa-bars"></i>
      </li>
      <li><i class="fas fa-home"></i></li>
      <li><i class="fas fa-users"></i></li>
      <li><i class="fas fa-concierge-bell"></i></li>
      <li><i class="fas fa-pen"></i></li>
      <li><i class="fas fa-phone-alt"></i></li>
    </ul>
  </nav>
</body>

</html>

如果您设置的最终值与所需值相比太高，唯一的副作用可能是返回转换的延迟太长。

【讨论】：

【参考方案3】：

只是您想要创建的内容的一个非常基本的 sn-p。

[注意]：过渡非常/有点古怪（不流畅）。但事实就是如此。

document.querySelector('.menu').addEventListener('click', (e) => 
  document.querySelector('ul.icons').classList.toggle('active');
);

* 
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;


.navbar 
  position: relative;
  width: 100%;
  height: 100px;
  display: flex;
  padding: 0 4rem;
  align-items: center;
  justify-content: flex-end;
  background-color: #f7f8f9;
  border-bottom: 1px solid #c1c1c1;


.navbar .menu i 
  cursor: pointer;
  font-size: 2rem;


.navbar .icons 
  opacity: 0;
  list-style: none;
  position: absolute;
  top: calc(100% + 2px);
  right: 3rem;
  display: flex;
  flex-direction: column;
  transition: opacity 250ms ease;


.navbar .icons .icon 
  display: grid;
  padding: 1rem;
  flex-shrink: 0;
  min-width: 30px;
  min-height: 30px;
  border-radius: 50%;
  place-items: center;
  background-color: #f7f8f9;
  border: 1px solid #c1c1c1;
  transition: margin-top 250ms ease;


.navbar .icons .icon:not(:first-of-type) 
  margin-top: 1rem;


.navbar .icons .icon:nth-child(2) 
  margin-top: -62px;


.navbar .icons .icon:nth-child(3) 
  margin-top: -62px;


.navbar .icons .icon:nth-child(4) 
  margin-top: -62px;


.navbar .icons .icon:nth-child(5) 
  margin-top: -62px;


.navbar .icons.active 
  opacity: 1;


.navbar .icons.active .icon 
  margin-top: 1rem;


.navbar .icons.active .icon:nth-child(1) 
  margin-top: 0;
  transition-delay: 250ms;


.navbar .icons.active .icon:nth-child(2) 
  transition-delay: 250ms;


.navbar .icons.active .icon:nth-child(2) 
  transition-delay: 500ms;


.navbar .icons.active .icon:nth-child(3) 
  transition-delay: 750ms;


.navbar .icons.active .icon:nth-child(4) 
  transition-delay: 1s;


.navbar .icons.active .icon:nth-child(5) 
  transition-delay: 1.25s;


.bx 
  font-size: 1.75rem;

<link href='https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css' rel='stylesheet'>

<nav class="navbar">
  <div class="menu" role="button">
    <i class='bx bx-menu'></i>
  </div>
  <ul class="icons">
    <li class="icon">
      <i class='bx bx-home-alt'></i>
    </li>
    <li class="icon">
      <i class='bx bx-user'></i>
    </li>
    <li class="icon">
      <i class='bx bx-bell'></i>
    </li>
    <li class="icon">
      <i class='bx bx-pen'></i>
    </li>
    <li class="icon">
      <i class='bx bx-phone'></i>
    </li>
  </ul>
</nav>

如果有人可以让这个过渡更顺利一点编辑这个答案。

【讨论】：

以上是关于CSS 过渡不适用于 height 属性的主要内容，如果未能解决你的问题，请参考以下文章

CSS3 过渡不适用于显示属性 [重复]

css 过渡动画不适用于 svg 路径的“d”属性更改

CSS 过渡不适用于 FF 中的 top 属性

CSS过渡不适用于变换：翻译

CSS过渡不适用于悬停

CSS 过渡不适用于 ng-class