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

하나의 해결책은 다른 애니메이션 실행 시간 인 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 */ 
    -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 */ 
    } 

과 : 애니메이션을 지연으로

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

을, 당신은이를 추가 할 수 있습니다 더 많은 유동성을 가지고있을 수도 있고, 마우스를 올려 놓지 않고 클릭만으로 볼 수도 있습니다.