复选框转换无法正常工作

Question

我的复选框有过渡问题。我只想在低宽度分辨率下慢慢下拉菜单。

这是我的代码：

HTML：

<nav class="header-nav">
                <input type="checkbox" id="header-nav-button">
                    <label for="header-nav-button">☰</label>
                </input>
                <ul>
                    <li><a class="header-nav-links" id="active">Home</a></li>
                    <li><a class="header-nav-links about-us">About Us</a></li>
                    <li><a class="header-nav-links">Our Services</a></li>
                    <li><a class="header-nav-links">Prices</a></li>
                    <li><a class="header-nav-links">Contact</a></li>
                </ul>
            </nav>

输入 CSS：

input[type="checkbox"] + label{
font-size: 40px;
cursor: pointer;
color: #ed145b;
font-family: Lato;
font-weight: 700;
line-height: 38px;
padding: 0 20px;}

input, label{
display: none;}

我的 CSS 代码放在 @media (max-width: 600px) 中：

label{
    display: inline-block;  
}

#header-nav-button{

}
#header-nav-button:not(:checked) ~ul{
    display:none;
    height: 0;
    -webkit-transition: all .5s ease;
     -moz-transition: all .5s ease;
     -o-transition: all .5s ease;
     -ms-transition: all .5s ease;
     transition: all 5s ease;
}

}
#header-nav-button:checked ~ ul{
    display: block;
    height: 200px;
}

#header-nav-button:checked ~ ul li{
    display: block;
    padding: 0 20px;
}

我尝试了高度、可见性和不透明度的技巧 - 不幸的是，没有任何东西对我有用。过渡似乎无法正常工作。

Answer 1

你不能为height制作动画。
但你可以为max-height 制作动画。

<nav class="header-nav">
  <label for="header-nav-button">☰</label>
  <input type="checkbox" id="header-nav-button">
  <ul>
    <li><a class="header-nav-links" id="active">Home</a></li>
    <li><a class="header-nav-links about-us">About Us</a></li>
    <li><a class="header-nav-links">Our Services</a></li>
    <li><a class="header-nav-links">Prices</a></li>
    <li><a class="header-nav-links">Contact</a></li>
  </ul>
</nav>

我将标签放置在输入上方，这样我就可以在 CSS 中使用更精确的 + 选择器 (#header-nav-button + ul)

label {
  font-size: 40px;
  cursor: pointer;
  color: #ed145b;
  font-family: Lato;
  font-weight: 700;
  line-height: 38px;
  padding: 0 20px;
}

input,
label {
  display: none;
}

@media ( max-width: 600px) {
  label {
    display: inline-block;
  }
  ul {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
  }
  ul li {
    padding: 0 20px;
  }
  #header-nav-button:checked+ul {
    max-height: 999px;
  }
}

我删除了display 属性，因为您无法为显示设置动画。相反，我使用overflow: hidden 隐藏菜单。
我将height 更改为max-height。这样做的好处是，您不需要知道菜单的确切高度，您可以将其设置为您知道它永远不会达到的数量。这样你的菜单就可以“增长”，而不必每次都计算它的高度。

https://jsfiddle.net/w4fwbw3s/8/