添加动画以使用 Tab 键更改焦点答案

【问题标题】：Add animation to change focus using tab key添加动画以使用 Tab 键更改焦点
【发布时间】：2016-10-12 05:09:18
【问题描述】：

我将创建带有许多输入的滚动页面（一些向导）。当用户按下 Tab 键时，我需要一些 CSS 技巧来动画滚动（类似于过渡，但过渡不起作用）。正如我们所知，它会将焦点转移到下一个元素并在需要时滚动。它工作得很好，但我想添加动画。现在它会跳起来，如下所示。可能吗？

.foo {
  height: 50px;
}

<ul style="height:70px; overflow:auto">
  <li class="foo">
    <input type="text">
  </li>
  <li class="foo">
    <input type="text">
  </li>
  <li class="foo">
    <input type="text">
  </li>
  <li class="foo">
    <input type="text">
  </li>
  <li class="foo">
    <input type="text">
  </li>
  <li class="foo">
    <input type="text">
  </li>
  <li class="foo">
    <input type="text">
  </li>
  <li class="foo">
    <input type="text">
  </li>
  <li class="foo">
    <input type="text">
  </li>
  <li class="foo">
    <input type="text">
  </li>

</ul>

更多信息：

我知道带有动画 js、过渡等的解决方案。但是当您仍然使用 Tab 键时它不是动画。

【问题讨论】：

你能再解释一下吗，你的演示不是很清楚你想要什么？我想建议daneden.github.io/animate.css，但我不确定你想要什么。也许有很多方法可以解决您的问题。

标签： javascript jquery html css animation

【解决方案1】：

请检查您是否需要这样的东西..

.foo {
  height: 50px;
}

input[type=text], textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}
 
input[type=text]:focus, textarea:focus {
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(81, 203, 238, 1);
}

<ul style="height:70px; overflow:auto">
  <li class="foo">
    <input type="text">
  </li>
  <li class="foo">
    <input type="text">
  </li>
  <li class="foo">
    <input type="text">
  </li>
  <li class="foo">
    <input type="text">
  </li>
  <li class="foo">
    <input type="text">
  </li>
  <li class="foo">
    <input type="text">
  </li>
  <li class="foo">
    <input type="text">
  </li>
  <li class="foo">
    <input type="text">
  </li>
  <li class="foo">
    <input type="text">
  </li>
  <li class="foo">
    <input type="text">
  </li>

</ul>

请查看以下链接了解更多信息

Glowing blue input highlights

这是你想要的吗？

【讨论】：

请至少从链接中添加一些信息到您的答案中，以防原始 URL 经受不住时间的考验。
不，当你使用 Tab 键（Chrome、macOS）时它不起作用。