HTML 链接上的 CSS 过渡效果会减慢点击时的页面过渡吗？

Question

我在我网站的 CSS 中找到了这个 sn-p：

a {
    transition: 0.25s;
}

我不确定它到底是做什么的，但我担心当有人单击链接进入下一页时，它会增加四分之一秒的延迟。我应该出于性能原因将其删除吗？

Answer 1

CSS 会影响页面上 DOM 元素的视觉呈现。过渡属性将应用于 CSS 更改（例如淡入淡出、增长/收缩）。单击链接超出了 CSS 的范围，不会导致延迟。延迟完全取决于所应用的效果。

Answer 2

CSS 转换不会影响页面之间的转换。它们只能影响页面本身的视觉效果。

在这种情况下，当您将鼠标悬停在链接上时，可能会使颜色变化变得更柔和，而不是瞬间发生。下面的代码片段演示了它，延迟时间更长 2 秒，以使其更明显。

a {
  transition: 2s;
  color: blue;
}
a:hover {
  color: red;
}

<a href="#">Hover over this link</a>

如果确实如此，那么指定应用变换的确切效果会更安全。 Kamuran Sönecek 在他的回答中指出，当链接改变大小并强制页面重排时，这可能是一个性能问题。 color 和 background-color 是它可能针对的目标。确保过渡仅应用于这些项目会更安全。

指定transition-property，在它应用的地方也会更清楚。如果很清楚它适用于哪些转换，我可能不会一开始就问这个问题。

a {
  transition: color, background-color, 2s;
  color: blue;
  background-color: white;
}
a:hover {
  color: red;
  background-color: #CCC;
}

<a href="#">Hover over this link</a>

Answer 3

一些过渡影响性能。我们在构建上一个 SPA 项目时遇到了性能问题。

当任何样式属性更改时，您的 CSS sn-p 将影响所有 a 元素。

div {transition: 2s;height:100px;background:#f00;width:100px}

如果你使用这个 CSS sn-p，所有的改变都将通过动画完成：背景、高度、宽度、文本颜色等。

示例如下：

var width = 100;
function myFunc(){
    width += 100;
    document.getElementById("teest").style.width = width + "px";
    document.getElementById("teest").style.background = '#FF9' + width;
}
setInterval(myFunc,2000);

* {transition: 2s}
div {height:100px;background:#f00}
#teest { width:100px}

<div id="teest"></div>