Пожалуйста, попробуйте запустить следующий фрагмент, затем нажмите на поле.
const box = document.querySelector('.box')
box.addEventListener('click', e => {
if (!box.style.transform) {
box.style.transform = 'translateX(100px)'
new Promise(resolve => {
setTimeout(() => {
box.style.transition = 'none'
box.style.transform = ''
resolve('Transition complete')
}, 2000)
}).then(() => {
box.style.transition = ''
})
}
})
.box {
width: 100px;
height: 100px;
border-radius: 5px;
background-color: #121212;
transition: all 2s ease;
}
<div class = "box"></div>
Что я ожидаю, что произойдет:
- Клик происходит
- Box начинает перевод по горизонтали на 100 пикселей (это действие занимает две секунды)
- При нажатии новая
Promise
также создается. Внутри сказалPromise
,setTimeout
функция установлена на 2 секунды - После того, как действие завершено (прошло две секунды),
setTimeout
запускается функция обратного вызова и устанавливаетсяtransition
значение none. После этогоsetTimeout
также возвращаетсяtransform
к своему первоначальному значению, таким образом отображая поле, чтобы появиться в исходном местоположении. - Поле появляется в исходном местоположении без проблем с эффектом перехода здесь
- После того, как все это закончится, установите
transition
значение окна обратно в исходное значение
Тем не менее, как можно видеть, transition
значение, по-видимому, не none
при запуске. Я знаю, что есть другие методы для достижения вышеизложенного, например, использование ключевого кадра и т.д. transitionend
, но почему это происходит? Я явно установить transition
обратно в исходное значение только послеsetTimeout
того, как заканчивает свой обратный вызов, таким образом разрешения Promise.
РЕДАКТИРОВАТЬ
В соответствии с запросом, вот gif кода, отображающего проблемное поведение: