Chrome中页面加载时的颜色过渡

Question

我在链接上设置了一些全局颜色，在颜色上设置了过渡：

a {
  color: blue;
  transition: color 300ms linear; }

现在，稍后在我的代码中，我在导航中的链接上有一些更具体的样式：

nav a { color: red; }
nav a:hover { color: black; }

HTML 看起来像这样：

<nav>
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
</nav>

以下内容按预期工作：

• 导航中的链接继承颜色过渡
• 当导航中的链接悬停时，它们的颜色会随着平滑过渡而变化

问题是： 当页面在 Chrome 中加载时，链接以默认颜色或我设置的全局链接颜色开始（我不确定是哪一种），然后过渡立即开始，链接更改为正确的颜色。

该问题似乎特定于 Google Chrome。我试图在 JSfiddle 中重新创建该问题，但它在小提琴中运行良好。

有没有办法阻止页面加载时发生的转换？

Answer 1

我也遇到过同样的问题，但有时我注意到初始转换无法开始，在我的按钮上留下了无意的颜色。

然后，我在 css-tricks 上找到了这篇文章，它解决了我的问题。

http://css-tricks.com/transitions-only-after-page-load/

这个想法是在加载 dom 之前禁用所有动画。如果您使用的是 Angular，您可以使用 ng-init 或任何指令删除该类。

希望这会有所帮助。

Answer 2

好吧，我研究了如何在元素父元素上设置条件，相对选择器是:has()，:parent，:not()，但它们都不能解决问题。
所以我认为，你找不到一个干净的解决方案。 （如果我错了，我会很高兴）
但作为替代解决方案，我有两个想法！

首先，将transition 置于悬停状态。
在这种情况下，您不会看到任何 css 覆盖的转换，如下所示：

a:hover { 
    transition: all 1s; //with venders
    color: #666; 
}

nav a:hover { 
    transition: all 1s; //with venders
    color: #AAA; 
}  

其次，您可以在<a></a> 标签上放置类，然后选择它们，例如：

a.parentIsNotNav {
    ...
}

a.prentIsNav {
    ...
}