Как сделать правильно анимацию, в э том примере?

Здравствуйте! Нужна помощь с своевременным добавлением transition
Есть блок el. Он создается и вставляется в блок container c transform: translateX(-100%);
По клику на container необходимо сначала установить translateX(0%) без transition, а затем плавно передвинуть вверх/низ уже появившийся в container блок;

Использование / неиспользование промисов приводит в одному и тому же результату - элемент движется по диагонали.
Условно помогает setTimemout ( в примере закомментирован ); Условно потому, что при локальном запуске, достаточно 10ms, на jsFiddle - 100ms, а так же, потому как считаю использование, setTimeout в данном случае не правильно.

Возможно я неправильно использую промисы. Возможно есть какие-то стандартные решения. Подскажите.
Вот код:
  • Вопрос задан
  • 106 просмотров
Решения вопроса 2
AlexandrVV86
@AlexandrVV86 Автор вопроса
Благодаря Евгений Евгений нашел решение

Ответ написан
Kasperenysh
@Kasperenysh
Рецидив в особо острой форме))
Вам нужно познакомиться с requestAnimationFrame, и для понятия происходящего посмотрите это видео (на русском удалили, есть только инглиш версия)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы