Question

nav {
  background-color: black;
}
nav ul {
    grid-column: 5;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
nav li {
    display: inline;
}
nav li a {
    color: white;
    font-family: Comic Sans MS;
    font-size: .9em;
    transition: all .5s ease-in-out; 
}
nav li a:hover {
    font-weight: 900;
    transition: all .5s ease-in-out; 
}

<nav>
      <ul>
        <li><a class="active" href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="projects.html">Projects</a></li>
      </ul>
    </nav>

因此，我已经设置了transition: all .5s ease-in-out;（请参阅.5秒），但是，当将鼠标悬停在链接上时，它将直接进入悬停状态而没有过渡。怎么会来？

Answer 1

您需要为font-weight（非悬停状态）建立一个初始值，并导入原始font-weight和悬停时的font-weight之间的所有font-weight。有关示例，请参见https://codepen.io/madshensel/pen/ZOYwpy。

如果您使用基于Web的字体，则可以像这样导入它们：

@import url(<font-url-goes-here>:400,900,800,700,600,500,300,200,100);

然后在nav li a中，添加font-weight: 400

Answer 2

过渡本身本身就没有问题，但字体粗细过渡确实有问题。网络上有几篇文章，但这是一个真正的great work around。

我已经为您的a:hover类添加了颜色更改，并删除了在那里出现的不必要的过渡。

nav {
  background-color: #333;
}
nav ul {
    grid-column: 5;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
nav li {
    display: inline;
}
nav li a {
    color: white;
    font-family: Comic Sans MS;
    font-size: .9em;
    transition: all .5s ease-in-out; 
}
nav li a:hover {
    letter-spacing: 0.3px;
    font-weight: bold;
    color: #f33;
}

<nav>
      <ul>
        <li><a class="active" href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="projects.html">Projects</a></li>
      </ul>
    </nav>

如您所见，过渡效果很好。当前（9月3日19）没有办法平滑地转换字体粗细。但是，有许多变通办法，并且我已经通过使用letter-spacing的变通方式更新了您的代码段。由于当权重改变时字体会变宽，因此您可以将其与font-size的增加相结合，以获得一些不错的效果。

在过渡完成之前，我的过渡时间不会消失

2 个答案: