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()，但它们都不能解决问题。 /> 所以我认为，你找不到一个干净的解决方案。 （如果我错了，我会很高兴的）
但作为替代解决方案，我有2个想法！

首先，将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 {
    ...
}