javascript - 使用 css transitions 动画 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

最好的问候

亚历克斯·斯莱博格

Answer 1

执行此操作以修复动画:

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

它将阻止容器扩展到更大的尺寸。