Добавление анимации для изменения фокуса с помощью клавиши tab

#javascript #jquery #html #css #animation

#javascript #jquery ( jquery ) #HTML #css — код #Анимация #jquery #css

Вопрос:

Я собираюсь создать страницу прокрутки с большим количеством входных данных (какой-нибудь мастер). Мне нужен какой-нибудь CSS-трюк для анимации прокрутки (что-то вроде перехода, но переход не работает), когда пользователь нажимает клавишу Tab. Как мы знаем, он меняет фокус на следующий элемент и при необходимости прокручивается. Это работает отлично, но я хочу добавить анимацию. Теперь он прыгает, как вы можете видеть ниже. Возможно ли это?

 .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.

1. Не могли бы вы объяснить немного подробнее, ваша демонстрация не очень понятна, чего именно вы хотите? Я хочу предложить daneden.github.io/animate.css но я не уверен, чего вы хотите. возможно, есть много способов решить вашу проблему.

Ответ №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>

Пожалуйста, проверьте ссылку ниже для получения дополнительной информации

Светящиеся синие блики ввода

Это то, что вы хотели?

1. Пожалуйста, добавьте хотя бы некоторую информацию из ссылки в свой ответ, на случай, если исходный URL-адрес не выдержит испытания временем.

2. Нет, это не работает, когда вы используете клавишу tab (Chrome, macOS).