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

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

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

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

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

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

Похожие вопросы