Question

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

a {
    transition: 0.25s;
}

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

Answer 1

CSS影响页面上DOM元素的可视化表示。 transition属性将应用于CSS更改（例如淡化，增长/缩小）。单击链接超出了CSS的范围，不会导致延迟。延迟纯粹是为了应用效果。

Answer 2

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

指定transition属性，在应用的位置也会更清晰。如果很清楚它应用于哪种转换，我可能不会问这个问题。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

某些过渡会影响效果。当我们构建最后一个SPA项目时，我遇到了性能问题。

当任何样式属性发生更改时，您的CSS代码段将影响所有a元素。

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

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

以下是示例：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

对HTML链接的CSS转换效果会降低点击时的页面转换吗？

3 个答案: