使用css过渡动画flexbox的问题

时间：2016-12-20 08:16:36

标签： javascript html css animation flexbox

我正试图为我的网站制作一个新的酷菜单动画。但我无法让菜单顺利制作动画。

当我点击菜单项时，javascript设置删除所有类＆＃34;选择＆＃34;从菜单项中添加＆＃34;选择＆＃34;到单击的菜单项。

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

最好的问候

Alex Sleiborg

2 个答案:

答案 0 :(得分：0)

这样做是为了修复动画：

let plainData = (password)?.data(using: String.Encoding(rawValue: String.Encoding.utf8.rawValue))
let base64String = plainData.base64EncodedStringWithOptions(NSData.Base64EncodingOptions.init(rawValue: 0))

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

答案 1 :(得分：0)

这更顺畅了吗？ 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>

相关问题
最新问题