在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是网站。

谢谢。

答

一种解决方案可能是将animation-delay应用于您的ul，这是> =您的其他动画运行时间。这样，动画只有在另一个完成后才会触发。

animation-delay: 3s;

类似的东西上面应该只是罚款。

或者，如果您正在使用转换，那么您可以使用transition-delay属性！

transition-delay: 3s;

好主意，虽然对于我的动画我使用过渡属性而不是实际的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 */ 
    }

我也认为你也许应该使动画快一点和更流畅，也可能是点击而不是悬停。

我会点击，但我不知道多少JavaScript。 – Kuebiko

在css转换后使ul淡入

相关推荐