元素变化焦点过渡效果答案

【问题标题】：Element change focus transition effect元素变化焦点过渡效果
【发布时间】：2016-11-25 09:41:01
【问题描述】：

如何实现从元素到另一个元素的焦点更改效果。

例如在 chrome 中检查这个网站。

它有一些将焦点从一个元素跳转到另一个元素的过渡效果。

我想要同样的效果。我已经尝试了以下 css，但它不起作用。

color: #BF1722;
transition: color 0.2s ease-in, text-shadow 0.2s ease-in;
-webkit-transition: color 0.2s ease-in, text-shadow 0.2s ease-in;
text-shadow: #bbb 1px 1px 1px;

是否涉及任何javascript？或者我在 css 中遗漏了一些东西？

【问题讨论】：

你能告诉我们更多代码吗？请创建一个小提琴
只能使用 JavaScript 来完成。有关更多信息，请参阅：github.com/NV/flying-focus

标签： css focus css-transitions

【解决方案1】：

你是这个意思吗？

a {
    transition: color 0.2s ease-in, text-shadow 0.2s ease-in, background-color 0.25s linear 0s;
}

a:hover {
    text-shadow: #bbb 1px 1px 1px;
    background-color: #ffffcc;
    color: #BF1722;
}

&lt;a&gt;test test test test&lt;/a&gt;

您需要有 2 个声明。首先是基本规则，其次是“悬停”规则。

第一条规则描述了向第二条规则过渡的标准。第二条规则只是更改了选项。

【讨论】：

不。他的意思是飞行焦点转换。
如果不是你，真的很抱歉。我已经将问题标记给了模组，让他们看看。如果我无意冒犯了你，我很抱歉！ :(

【解决方案2】：

这是一个 JavaScript UI 概念，使用 ::after 和 ::before 伪元素。完整的源代码在这里：GitHub - NV/flying-focus。

YouTube 中也有对其工作原理的解释。

片段

<script src="http://n12v.com/focus-transition/flying-focus.js"></script>
<input /><br /><br /><br /><br />
<input /><br /><br /><br /><br />
<input /><br /><br /><br /><br />
<input />

为了澄清我写的答案是正确的，我可以从Who uses Flying Focus: In the Wild 获得截图，其中包含 WebAIM.org，按照 OP 的要求。

【讨论】：