时间戳

首页 > 解决方案 > 影响顶部的颜色过渡‽

html - 影响顶部的颜色过渡‽

问题描述

我正在使用 Firefox 52.9.0。

我正在尝试向页面添加跳过导航链接。目前，页面如下所示：

/* Accessibility */
  /* Hide the skip to main content link unless it has focus */
body > a:first-child {
  background: inherit;
  position: fixed;
  left: 0px;
  top: -1em;
  transition: top 2s ease-out;
}
body > a::first-child:not(:focus) {
}
body > a:first-child:focus {
  top: 0px;
  transition: top 0.1s ease-in;
}
<a href="#lorem">skip to main content</a>
<main id="lorem">
  <h1>Lorem Ipsum</h1>
  <p>Lorem ipsum... can't remember the rest, sorry.</p>
  <p>This CSS is mostly fine.</p>
</main>

（点击页面并按下Tab查看效果。）

这看起来很好，除了下降线和下划线是可见的。为了解决这个问题，我告诉浏览器将文本颜色更改为transparent没有焦点时：

/* Accessibility */
  /* Hide the skip to main content link unless it has focus */
body > a:first-child {
  background: inherit;
  position: fixed;
  left: 0px;
  top: -1em;
  transition: top 2s ease-out;
  transition: color 2s ease-out;
}
body > a:first-child:not(:focus) {
  color: darkgoldenrod;
}
body > a:first-child:focus {
  top: 0px;
  transition: top 0.1s ease-in;
  transition: color 0.1s linear;
}
<a href="#lorem">skip to main content</a>
<main id="lorem">
  <h1>Lorem Ipsum</h1>
  <p>Lorem ipsum... can't remember the rest, sorry.</p>
  <p>This CSS behaves strangely.</p>
</main>

（transparent被替换了，darkgoldenrod所以更容易看到效果。）

过渡有效，但由于color某种原因，它停止了top过渡！

为什么会这样，我该如何解决？

标签： htmlcsscss-transitions

解决方案

您的第二个transition声明删除而不是添加到第一个声明。这是工作中的级联。

您不能使用多个transition声明附加地声明单独的转换；您需要将它们分组为一个声明，如下所示：

body > a:first-child:focus {
  top: 0px;
  transition: top 0.1s ease-in, color 0.1s linear;
}

推荐阅读