当页面加载时，所有链接都有过渡时间。为什么？

Question

我有问题。正如您将从下面的代码中看到的，我为我的菜单项添加了一个过渡时间，因此当（在桌面上）我将鼠标悬停在它们上方时，它们会平滑地缩放。这很好，但我注意到当我单击或触摸任何具有 link 的文本或按钮时，转换会对所有锚标记起作用。当页面加载时，每个项目都是 link，平滑地“blinks”。

我做错了什么？我应该给每个 link 一个不同的 class 并独立地向每个 class 添加过渡吗？或者如何？

此外，为了让所有菜单 link 区域都可以点击，我不仅要在菜单容器上添加显示块，还要在每个 link 上添加显示块，你可以看到在 css 代码中（class 菜单项）。这是正常现象还是我做错了什么？

非常感谢！

我认为您无法从下面的代码片段中看到它，所以这里是托管在 netlify 上的网站，因此您可以看到正在运行的转换。 my website

.menu {
  width: 100vw;
  display: block;
  text-align: center;
  list-style: none;
  line-height: 59px;
  padding-top: 15px;
  background: linear-gradient(360deg, rgb(255,190,139), rgb(255,210,179));
}

.menuitem {
  display: block;
  text-decoration: none;
  font-family: 'Varela Round', sans-serif;
  color: black;
  cursor: pointer;
  font-size: 43px;
  transition: .3s;
}

.item {
  transition: 0.2s;
}


.menuitem:hover {
  color: white;
  text-shadow: 2px 2px 5px black;
}

.item:active {
  transform: scale(.8);
  color: white;
  text-shadow: 2px 2px 5px black;
}

.current {
  color: white;
  text-shadow: 2px 2px 5px black;
}

    <nav>
      <ul class="menu">
        <li class="item home"><a class="current menuitem menuitemactive" href="index.html">Home</a></li>
        <li class="item cani"><a href="cani.html" class="menuitem menuitemactive">Cani</a></li>
        <li class="item gatti"> <a href="gatti.html" class="menuitem menuitemactive">Gatti</a></li>
        <li class="item comeaiutarci"><a href="comeaiutarci.html" class="menuitem menuitemactive">Come aiutarci</a></li>
        <li class="item contatti"><a href="contatti.html" class="menuitem menuitemactive">Contatti</a></li>
      </ul>
    </nav>

Answer 1

首先，您需要了解 transitions 的工作原理。

div {
    transition: <property> <duration> <timing-function> <delay>;
}

在您的示例中，您通过不指定一个来转换每个类型的属性，因为默认属性是“全部”。最佳做法是只转换一个属性，否则所选元素中的每个属性都将被转换。

其次，您应该指定要转换的选择器（classes、ID 等），这样并非所有链接都会受到影响。

因此，如果您只想定位菜单并淡化颜色或 text-shadow，您可以这样做：

.menuitem {
    transition: color 0.3s;
    transition: text-shadow 0.3s;
}

如果您在网站的任何其他地方（主菜单除外）使用此 class，这些链接也将被转换。

当页面加载时，所有链接都有过渡时间。为什么？

All links have transition time together when the page loads. Why?

html

css

hyperlink

css-transitions