Chrome浏览器页面加载时的颜色过渡

Question

我设置了一些全局颜色和链接上的过渡效果，具体如下：

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

现在，在我的代码中，我对导航链接进行了一些更具体的样式设置：

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

HTML代码如下：

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中重新创建问题，但在fiddle中可以正常工作。

是否有办法阻止页面加载时发生过渡？

- CaribouCode

---

你能提供一个 Fiddle 吗？ - ofer dofer

使用提供的代码无法重现。请提供足够的代码以重现您的问题。此外，将“nav a”移动到“a”之前有什么问题吗？它具有更高的特异性，因此无论哪个在后面都无关紧要。 - Zach Saucier

@BerdiyaOnur 这个问题在 fiddle 中无法重现。 - CaribouCode

我已经编辑了我的问题，使其更加具体和清晰。这个问题似乎只发生在Google Chrome浏览器中。我正在运行36版本。 - CaribouCode

这似乎是一个依赖于标记的错误。我有一个出现问题的页面，但在简化版本中无法复制。当前运行的版本是40。Firefox没有问题。 - musiKk

Answer 1

我之前也遇到过同样的问题，但我并没有在意，直到有时候我发现初始的过渡动画不会开始，给我的按钮留下了一个非预期的颜色。

后来，我在css-tricks网站上找到了一篇文章，解决了我的问题。文章链接如下：http://css-tricks.com/transitions-only-after-page-load/ 文章的主要思想是在dom加载完成前禁用所有动画。如果你正在使用Angular，你可以使用ng-init或任何指令来删除class。

希望这可以帮助你。

- pixel.ninja

---

啊是的，这不是一个坏主意！感谢您找到了链接。有些浏览器默认会这样做，这很遗憾 - 因为它试图转换到您告诉它作为元素默认状态的状态，所以显然应该是您看到的第一个版本。 - CaribouCode

CSS过渡的整个意义在于能够在没有JavaScript的情况下进行动画。这种解决方案是非常不幸的hack。 - musiKk

对我来说，与scrollscpy（BS4）结合使用无效，但是这是个好技巧。 - Lukáš Irsák

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.parentIsNotNav {
    ...
}

a.prentIsNav {
    ...
}

- MeTe-30

---

建议的解决方案行不通，因为它只会从旧颜色过渡到新颜色，而不能反过来。 - Zach Saucier

@ZachSaucier；首先，有两个想法，然后，在第一个想法中，在解决页面加载问题之后，您可以通过在onload()中使用js将转换简单地添加到主范围。我说它们不是您要寻找的干净解决方案，它们是替代方案！ - MeTe-30

@MeTe-30 感谢您的帮助，但这不是我要找的解决方案。您的第一个解决方案意味着链接颜色在悬停结束时不会过渡回其原始状态，这本质上是改变了效果。我不确定您在第二个想法中想要实现什么，但我看不出那样会起作用。 - CaribouCode