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

好吧，我发现你的动画有几个问题！

第一个问题是，＆＃34;联系＆＃34;菜单项显示在其他菜单项下，并且当动画仍在进行时，菜单项互相攻击。要解决此问题，您需要添加以下内容：

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

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

Answer 2

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

animation-delay: 3s;

与上述类似的东西应该可以正常工作。

或者，如果您正在使用过渡，那么您可以改为使用transition-delay属性！

transition-delay: 3s;

在css转换后使ul淡入

2 个答案: