В приложении есть две метки
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-я точка)