Probleme animieren Flexbox mit CSS-Übergängen

Question

Ich versuche, eine neue coole Menüanimation für meine Website zu machen. Aber ich kann das Menü nicht flüssig animieren.

Wenn ich auf einen Menüpunkt klicke, setze Javascript ein, lösche alle ausgewählten Klassen aus den Menüpunkten und füge "ausgewählt" zu dem Menüpunkt hinzu, auf den geklickt wurde.

Das Menü 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> 

Die CSS für das Menü

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; 
} 

Aber es ist nicht richtig sieht. Wenn auf einen Menüeintrag geklickt wird, befindet sich der Text in einer neuen Zeile und eine Sekunde später wird er korrekt angezeigt - Irgendwelche Ideen, wer?

Sie die Seite hier sehen

http://piranya.dk/velkommen

Mit freundlichen Grüßen

Alex Sleiborg

Answer 1

Sie diese um die Animation zu beheben:

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

Es wird der Behälter verhindern von der Erweiterung zu einer größeren Größe.

Answer 2

ist das schon glatter? JavaScript ist noch nicht beteiligt. Und ich habe gerade das Untermenü entfernt, um den Fortschritt Schritt für Schritt zu sehen.

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>