使用 css 转换为 flexbox 设置动画的问题

Question

我正在尝试为我的网站制作一个很酷的新菜单动画。但我无法让菜单流畅地制作动画。

当我单击一个菜单项时，javascript 设置一个从菜单项中删除所有“选定”类并将“选定”添加到单击的菜单项。

菜单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

最好的问候

亚历克斯·斯莱博格

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>