HTML 链接上的 CSS 过渡效果是否会减慢单击时的页面过渡速度

Question

我在网站的CSS中找到了这个片段：

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是它可能瞄准的那些。 确保转换仅应用于这些项目会更安全。

指定过渡属性也会更清楚它的应用位置。 如果很清楚它适用于哪些过渡，我可能不会一开始就问这个问题。

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 代码段将影响所有a元素。

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

如果你要使用此CSS片段，所有更改都将通过动画完成：背景，高度，宽度，文本颜色等。

下面是示例：

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>