「過渡」不轉換ul元素

Question

這是一個簡單的下拉菜單。

不知道爲什麼帶有「過渡」的動畫不能轉換ul元素？我已經在代碼中隔離了問題START & END。

在開始UL具有平移Y（-2em），懸停平移Y（0％）

html { 
 
    background: #EEEEEE; 
 
} 
 
.container { 
 
    background: white; 
 
    margin: 5% auto 0 auto; 
 
} 
 
.menu ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.menu ul li { 
 
    display: inline-block; 
 
    padding: 15px; 
 
    position: relative; 
 
} 
 
/* 
 
//////////// 
 
////START/// 
 
//////////// 
 
*/ 
 

 
.menu ul li ul { 
 
    display: none; 
 
    transform: translateY(-2em); 
 
    /* Why transition does not work? */ 
 
    transition: transform 300ms ease-in-out 0s; 
 
} 
 
.menu ul li:hover ul { 
 
    display: flex; 
 
    flex-direction: column; 
 
    position: absolute; 
 
    background: white; 
 
    margin-top: 15px; 
 
    width: 100%; 
 
    left: 0; 
 
    transform: translateY(0%) 
 
} 
 
/* 
 
//////////// 
 
////END///// 
 
//////////// 
 
*/ 
 

 
.menu ul li:hover ul li:hover { 
 
    background: #EEEEEE; 
 
}

<div class="container"> 
 
    <div class="menu"> 
 
    <ul> 
 
     <li>One 
 
     </li> 
 
     <li>Hover 
 
     <ul "> 
 
       <li>0</li> 
 
       <li>0</li> 
 
       <li>0</li> 
 
       <li>0</li> 
 
       <li>0</li> 
 
      </ul> 
 
      </li> 
 

 
      <li>Three</li> 
 
     </ul> 
 
     </div> 
 
    </div>

Answer 1

這不是很漂亮，但它證明了它的display和position改變屬性以防止工作過渡。

最常見的是使用max-height,opacity和/或visibility來實現。

html { 
 
    background: #EEEEEE; 
 
} 
 
.container { 
 
    background: white; 
 
    margin: 5% auto 0 auto; 
 
} 
 
.menu ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.menu ul li { 
 
    display: inline-block; 
 
    padding: 15px; 
 
    position: relative; 
 
} 
 
/* 
 
//////////// 
 
////START/// 
 
//////////// 
 
*/ 
 

 
.menu ul li ul { 
 
    transform: translateY(-2em); 
 
    /* Why transition does not work? */ 
 
    transition: all 300ms ease-in-out; 
 
} 
 
.menu ul li:hover ul { 
 
    background: white; 
 
    margin-top: 15px; 
 
    width: 100%; 
 
    left: 0; 
 
    transform: translateY(0%) 
 
} 
 
/* 
 
//////////// 
 
////END///// 
 
//////////// 
 
*/ 
 

 
.menu ul li:hover ul li:hover { 
 
    background: #EEEEEE; 
 
}

<div class="container"> 
 
    <div class="menu"> 
 
    <ul> 
 
     <li>One 
 
     </li> 
 
     <li>Hover 
 
     <ul "> 
 
       <li>0</li> 
 
       <li>0</li> 
 
       <li>0</li> 
 
       <li>0</li> 
 
       <li>0</li> 
 
      </ul> 
 
      </li> 
 

 
      <li>Three</li> 
 
     </ul> 
 
     </div> 
 
    </div>