用css轉換動畫flexbox的問題

Question

我想爲我的網站製作一個新的酷炫菜單動畫。但我無法讓菜單順利進行動畫。

當我點擊一個菜單項時，javascript設置從菜單項中刪除所有「selected」類並將「selected」添加到單擊的菜單項中。

菜單HTML

<div class="piranya-menu-wrapper responsive"> 
<ul id="piranya-menu-2" class="piranya-menu open"> 
    <li data-offset="0" class="piranya-menu-item-1 piranya-menu-item-first" style="transition-delay: 0s;"><a href="#">Forside</a></li> 
    <li data-offset="1" aria-haspopup="true" class="piranya-menu-item-2 piranya-menu-item-intermediate parent selected" style="transition-delay: 0.05s;"> 
     <img src="/Image/8239" alt="menuicon" class="piranya-menu-item-icon"><a href="#">Løsninger</a>        <i class="piranya-icon-text piranya-expander"></i> 
     <ul> 
      <li data-offset="0" class="piranya-menu-item-1 piranya-menu-item-first"><a href="#">Hjemmeside</a></li> 
      <li data-offset="1" class="piranya-menu-item-2 piranya-menu-item-intermediate"><a href="#">Webshop</a></li> 
      <li data-offset="2" class="piranya-menu-item-3 piranya-menu-item-intermediate"><a href="#">Infoscreen</a></li> 
      <li data-offset="3" class="piranya-menu-item-4 piranya-menu-item-intermediate"><a href="#">SEO</a></li> 
      <li data-offset="4" class="piranya-menu-item-5 piranya-menu-item-intermediate"><a href="#">Hosting og drift</a></li> 
      <li data-offset="5" class="piranya-menu-item-6 piranya-menu-item-last"><a href="#">Special løsninger</a></li> 
     </ul> 
    </li> 
    <li data-offset="2" aria-haspopup="true" class="piranya-menu-item-3 piranya-menu-item-intermediate parent" style="transition-delay: 0.1s;"> 
     <img src="/Image/8242" alt="menuicon" class="piranya-menu-item-icon"><a href="#">Platform</a>        <i class="piranya-icon-text piranya-expander"></i> 
     <ul> 
      <li data-offset="0" class="piranya-menu-item-1 piranya-menu-item-first"><a href="#">CMS</a></li> 
      <li data-offset="1" class="piranya-menu-item-2 piranya-menu-item-intermediate"><a href="#">E-commerce</a></li> 
      <li data-offset="2" class="piranya-menu-item-3 piranya-menu-item-intermediate"><a href="#">Social Media</a></li> 
      <li data-offset="3" class="piranya-menu-item-4 piranya-menu-item-intermediate"><a href="#">Markedsføring</a></li> 
      <li data-offset="4" class="piranya-menu-item-5 piranya-menu-item-intermediate"><a href="#">Infoscreen</a></li> 
      <li data-offset="5" class="piranya-menu-item-6 piranya-menu-item-intermediate"><a href="#">Booking</a></li> 
      <li data-offset="6" class="piranya-menu-item-7 piranya-menu-item-intermediate"><a href="#">Apps</a></li> 
      <li data-offset="7" class="piranya-menu-item-8 piranya-menu-item-last"><a href="#">Integration</a></li> 
     </ul> 
    </li> 
    <li data-offset="3" aria-haspopup="true" class="piranya-menu-item-4 piranya-menu-item-intermediate parent" style="transition-delay: 0.15s;"> 
     <img src="/Image/8245" alt="menuicon" class="piranya-menu-item-icon"><a href="#">Cases</a>        <i class="piranya-icon-text piranya-expander"></i> 
     <ul> 
      <li data-offset="0" class="piranya-menu-item-1 piranya-menu-item-first"><a href="#">Hjemmeside</a></li> 
      <li data-offset="1" class="piranya-menu-item-2 piranya-menu-item-last"><a href="#">Infoscreen</a></li> 
     </ul> 
    </li> 
    <li data-offset="4" class="piranya-menu-item-5 piranya-menu-item-intermediate" style="transition-delay: 0.2s;"> 
     <img src="/Image/8247" alt="menuicon" class="piranya-menu-item-icon"><a href="#">Support</a> 
    </li> 
    <li data-offset="5" class="piranya-menu-item-6 piranya-menu-item-last" style="transition-delay: 0.25s;"> 
     <img src="/Image/8246" alt="menuicon" class="piranya-menu-item-icon"><a href="#">Kontakt</a> 
    </li> 
    <div class="close-btn"></div> 
</ul> 
</div> 

的CSS的菜單

header .piranya-menu 
{ 
    display: flex; 
    width: 100%; 
} 
#piranya-menu-2 > .piranya-menu-item-first 
{ 
    display: none; 
} 
header .piranya-menu-wrapper.responsive > ul > li 
{ 
    padding: 0px 8px; 
    cursor: pointer; 
    transition: flex 1000ms ease; 
} 
header .piranya-menu-wrapper.responsive > ul > li > a 
{ 
    color: white; 
    clear: both; 
    width: 100%; 
    float: left; 
    font-size: .8em; 
    text-align: center; 
} 
header .piranya-menu-wrapper.responsive > ul > li.selected 
{ 
    flex: 1;  
} 
header .piranya-menu-wrapper.responsive > ul > li.selected > a 
{ 
    line-height: 60px; 
    clear: none; 
    width: auto; 
    font-size: 1em; 
    padding-right: 5px; 
    background-color: #00253b; 
} 
#piranya-menu-2 > li.selected > img 
{ 
    height: 32px; 
    padding: 14px 10px 14px 5px; 
    margin: 0; 
    background-color: #00253b; 
    float: left; 
} 
header .piranya-menu-wrapper.responsive > ul > li:not(.selected):hover 
{ 
    background-color: rgba(0, 37, 59, 0.5); 
} 

header .piranya-menu-wrapper.responsive > ul > li > img 
{ 
    height: 24px; 
    margin: 8px auto; 
    float: none; 
    display: block; 
} 

但它看起來並不正確。當一個菜單項被點擊時，文本是在一個新的行中，一秒鐘後它顯示正確 - 任何想法的人？

這裏你可以看到網站

http://piranya.dk/velkommen

問候

亞歷Sleiborg

Answer 1

這樣做是爲了修正動畫：

body > div.main-wrapper > div > header > div.lower > div > div { 
    max-height: 60px 
} 

這將防止容器從擴大到更大的規模。

Answer 2

更順暢了嗎？ JavaScript尚未涉及。我剛剛刪除了子菜單，逐步查看進度。

header{ 
 
width:100%; 
 
position:relative;} 
 

 
.upper, .lower{ 
 
width:100%; 
 
position:relative; 
 
display:flex; 
 
} 
 

 
.upper{ 
 
background:#ccc; 
 
    padding:10px 0; 
 
} 
 
.upper img{ 
 
width:200px;} 
 
.lower{ 
 
background:#000;} 
 

 
.center{ 
 
width:80%; 
 
color:#fff; 
 
text-decoration:none; 
 
align-self:center; 
 
margin:0 auto;} 
 

 
.center a{ 
 
text-decoration:none; 
 
color:#fff; 
 
transition: all 1s ease-in-out} 
 

 
.lower ul{ 
 
list-style: none; 
 
padding:0; 
 
margin:0; 
 
display:flex; 
 
flex-direction:row; 
 
} 
 

 
.lower li{ 
 
height:54px; 
 
width:36px; 
 
margin:5px; 
 
display:flex; 
 
align-items:center; 
 
display:flex; 
 
flex-direction:column; 
 
transition: all 1s ease-in-out 
 
} 
 

 
.lower img{ 
 
height:32px; 
 
margin:2px; 
 
transition: all 1s ease-in-out 
 
} 
 

 

 
.lower li:hover{ 
 
flex-direction:row; 
 
transition:all 1s ease-in-out; 
 
width:160px; 
 
}

<header> 
 
    <div class="upper"> 
 
    <div class="center"> 
 
     <img src="http://piranya.dk/image/8254"> 
 
    </div> 
 
    </div> 
 
    <div class="lower"> 
 
    <div class="center"> 
 
     <ul> 
 
     <li> 
 
     <img src="http://piranya.dk/Image/8239"> 
 
     <a href="#">menu</a> 
 
     </li> 
 
     <li> 
 
     <img src="http://piranya.dk/Image/8239"> 
 
     <a href="#">menu</a> 
 
     </li> 
 
     <li> 
 
     <img src="http://piranya.dk/Image/8239"> 
 
     <a href="#">menu</a> 
 
     </li> 
 
     <li> 
 
     <img src="http://piranya.dk/Image/8239"> 
 
     <a href="#">menu</a> 
 
     </li>   
 
     </ul> 
 
    </div> 
 
    </div> 
 
</header>