在css轉換後使ul淡入

我在創建我的網站上的導航系統時遇到問題。一旦你將鼠標懸停在導航上，它就會延伸到適合網站的類別。我知道問題所在，因爲ul的父級寬度太小而不能包含文本，所以文本在過渡之前必須縮小。在css轉換後使ul淡入

所以我想知道，有一種方法可以在寬度完成動畫後過渡文本。或者還有其他解決方案嗎？

CSS：

.navigation { 
    width: 3.5vw; 
    height: 7vh; 
    background-color: #fcc101; 
    margin: 1vw; 
    border-radius: 4rem; 
    font-family: 'Work Sans', sans-serif; 
    transition: all 1s ease-in; 
    background-image: url('menu.svg'); 
    background-size: 30px; 
    background-repeat: no-repeat; 
    background-position: center center; 
    position: fixed; 
    } 



    .navigation .ul a { 
    visibility: hidden; 
    opacity: 0; 
    transition: all 1s ease-in-out; 

    } 

    .navigation .ul { 
    visibility: hidden; 


    } 


    .navigation:hover { 
    width: 25vw; 
    border-radius: 3rem; 
    background-image: none; 
    background-size: 30px; 
    background-repeat: no-repeat; 
    background-position: center center; 
    } 

    .navigation:hover ul a { 
    opacity: 1; 
    visibility: visible; 
    } 


    li { 
    display: inline; 
    } 

    a { 
    color: white; 
    text-decoration: none; 
    font-size: 1.25rem; 
    } 

    .ul { 
    text-align: left; 
    line-height: 7vh; 
    padding-left: 2vw; 
    word-spacing: 1vw; 
    }

Here是網站。

謝謝。

來源

2017-10-15 Kuebiko

一種解決方案可能是將animation-delay應用於您的ul，這是> =您的其他動畫運行時間。這樣，動畫只有在另一個完成後纔會觸發。

animation-delay: 3s;

類似的東西上面應該只是罰款。

或者，如果您正在使用轉換，那麼您可以使用transition-delay屬性！

transition-delay: 3s;

來源

2017-10-15 00:47:39

好主意，雖然對於我的動畫我使用過渡屬性而不是實際的CSS動畫。我認爲存在過渡延遲，對嗎？ – Kuebiko

很好，更新了我原來的答案。 –

有沒有辦法讓轉換延遲只發生在你知道的開始？ – Kuebiko

好吧，我發現了幾個問題，你的動畫！

第一個問題是，「聯繫」菜單項顯示在其他菜單項下，並且當動畫仍在進行時，菜單項相互依次排列。要解決這個問題，你需要補充一點：

.navigation .ul { 
    visibility: hidden; 
    position:absolute; /* We need a position absolute so it won't be effected by the size of the parent div */ 
    width:400px; /* Set the width to whatever works for you */ 
    }

至於延遲的動畫，可以補充一點：

.navigation .ul { 
    visibility: hidden; 
    position:absolute; /* We need a position absolute so it won't be effected by the size of the parent div */ 
    width:400px; /* Set the width to whatever works for you */ 
    -webkit-transition-delay: 2s; /* You can set the delay to whatever you need */ 
    transition-delay: 2s; /* You can set the delay to whatever you need */ 
    }

我也認爲你也許應該使動畫快一點和更流暢，也可能是點擊而不是懸停。

來源

2017-10-15 06:09:18

我會點擊，但我不知道多少JavaScript。 – Kuebiko

在css轉換後使ul淡入

回答

相關問題