Добавление анимации перехода к метке ввода - PullRequest
0 голосов
/ 19 июня 2020

В приложении есть две метки

const [label, setLabel] = useState({
    primary: "CC",
    secondary: "BCC"
  });

У меня поле ввода внутри блока div

<div className="App">
   <span class="label">{label.primary} </span>
   <input />
   <a onClick={alterField}>{label.secondary}</a>
</div>

При нажатии кнопки я меняю положение метки, т.е.

const alterField = () =>
    setLabel({ primary: label.secondary, secondary: label.primary });

Я хотел добавить сюда анимацию на основе c критериев ниже

  • при нажатии b cc, b cc скользит справа налево.
  • при нажатии cc метка b cc будет go вправо (в обратном направлении в первой точке).
  • Анимация не должна присутствовать при начальной загрузке.

Я попытался добавить класс анимации, но это только односторонняя анимация, т.е. 2-я точка не покрыта.

Если я переключаю класс, например cc или bcc, анимация срабатывает при начальной загрузке. (3-я точка)

ДЕМО

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...