Хотелось бы подытожить:
Была проблема с кодом:
//где-то выше
el.style.transform = 'translateX(-100%)';
//где-то ниже
el.style.transform = '';
el.style.transition = '10s';
el.style.transform = 'translateY(100%)';
Проблема заключалось в том, что transition применялось, еще до (может во время сброса первой трансформации). Поэтому блок двигался не буквой "Г", а по диагонали.
Евгений скинул видео:
Джейк Арчибальд в котором, демонстрируется, решение данной проблемы. Пока я дошел до нужной секунды, читая титры и вникая, я уже сам нашел придумал решение - и оно заработало, но не был уверен в его правильности, так возник этот вопрос. В это время предложил еще варианты решений Сергей Соколов.
И так публикую 4 решения:
1, 2 Джейк Арчибальд:
1. requestAnimationFrame
requestAnimationFrame(()=>{
requestAnimationFrame(()=>{
el.style.transition = '10s';
el.style.transform = 'translateY(100%)';
})
})
2. Просим браузер посчитать стили для элемента:
el.style.transform = '';
getComputedStyle(el).transform;
el.style.transition = '10s';
el.style.transform = 'translateY(100%)';
3, 4 Сергей Соколов
3. тоже что 2
el.style.transform = '';
void el.offsetWidth;
el.style.transition = '10s';
el.style.transform = 'translateY(100%)';
4. Добавление css анимации:
.animate-go1 {
animation-duration: 4s;
animation-name: go1;
}
@keyframes go1 {
from {
transform: translateX(-100%);
}
0.5% {
transform: translateX(0%);
}
to {
transform: translateY(100%);
}
}
const className = 'animate-go1';
el.classList.remove(className);
el.classList.add(className);
5. Вариант самый короткий, автор
Александр:
el.style.transform = 'translate(-100%, 0)';
c.onclick = function() {
el.style.transition = '10s';
el.style.transform = 'translate(0, 100%)';
}
Всех благодарю за участие
