CSSの移行後にulをフェードインさせる

Question

私のウェブサイトにナビゲーションシステムを作成する際に問題があります。ナビゲーション上にカーソルを合わせると、ul内にあるウェブサイトのカテゴリに合わせて拡張されます。 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サイトです。

ありがとうございました。

Answer 1

解決策の1つは、あなたの他のアニメーションの実行時間であるulにanimation-delayを適用することです。このようにして、アニメーションはもう一方が完了した後にのみ起動する必要があります。上記と同様の

animation-delay: 3s;

何かがうまく動作するはずです。

トランジションを使用している場合は、代わりにtransition-delayプロパティを使用できます。

transition-delay: 3s;

Answer 2

まあ、私はあなたのアニメーションでの問題のカップルを発見！

最初の問題は、「連絡先」メニュー項目が他のメニュー項目の下に表示され、アニメーションがまだ進行中のときにメニュー項目が互いに下にあることです。 あなたがこれを追加する必要があり、この問題解決するには：アニメーションを遅延させるよう

.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 */ 
    } 

私もあなたが多分少し速くアニメーションを作るべきだと思いますし、より多くの液体、そしておそらくホバリングの代わりにクリックでそれを持っています。