復選框轉換無法正常工作

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中（最大寬度：600像素）：

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/