сейчас я разбираюсь с анимационными эффектами с помощью css и javascript и хочу реализовать алгоритм похожий на VueJs чтобы лучше понимать как это все работает и вот столкнулся с несколькими проблемами и вопросами.
Почему в обработчике события для btnShow если я не буду использовать таймер на 0 секунд, то у меня просто не сработает анимация, ведь алгоритм вроде правильный сначала ставлю класс enter, чтобы задать начальные стили, потом задаю enter-active - для изменения начальных стилей, потом сразу удаляю enter, и когда сработает событие transitionend уберу обработчик события на элемент. В теории все должно работать, но на практике получается все не так, анимация во все не работает, js вообще не ставит класс enter, я конечно догадываюсь, что это такая оптимизация браузера и что типа браузер видит добавление, а потом удаление класса и вообще его не ставит, но все равно я не понимаю как это работает и почему. Почему браузер не выполняет команды подряд, почему код ведет себя так непредсказуемо, что этому способствует?
elem.style.display = 'inline-block'; elem.classList.add('enter'); elem.classList.add('enter-active'); elem.classList.remove('enter');
Почему settimeout это исправляет?
Почему опять же если я чуть меняю алгоритм и здесь уже сразу после enter добавляю enter-active, то анимация тоже не сработает, браузеру именно надо чтоб я добавил сначала enter, а потом ставил интервал и только в нем уже добавлял новый класс и удалял старый. Почему так ? Как это вообще работает, уже голова кругом если честно))
elem.style.display = 'inline-block'; elem.classList.add('enter'); elem.classList.add('enter-active'); setTimeout(function() { elem.classList.remove('enter'); }, 0);
Заранее большое спасибо, если объясните как это все работает в браузере и почему надо делать именно так, чтоб в дальнейшем это не было сюрпризом для меня))
var btnHide = document.querySelector('.hide');
var btnShow = document.querySelector('.show');
var elem = document.querySelector('.block');
btnHide.addEventListener('click', function () {
elem.classList.add('leave-active');
function handler() {
elem.style.display = "none";
elem.classList.remove('leave-active');
elem.removeEventListener('transitionend', handler);
}
elem.addEventListener('transitionend', handler);
});
btnShow.addEventListener('click', function () {
elem.style.display = 'inline-block';
elem.classList.add('enter');
// elem.classList.add('enter-active'); ??
setTimeout(function() {
elem.classList.remove('enter');
elem.classList.add('enter-active');
}, 0);
elem.addEventListener('transitionend', function() {
elem.classList.remove('enter-active');
});
});
.block {
background: greenyellow;
display: inline-block;
margin: 15px;
}
.leave-active {
transition: opacity, 1s;
opacity: 0;
transform: translateX(200px);
}
.enter {
opacity: 0;
transform: translateX(-200px)
}
.enter-active {
transition: opacity 1s, transform 1s;
opacity: 1;
}
<div class="btns">
<button class="hide">Hide</button>
<button class="show">Show</button>
</div>
<div class="block">
<p>Lorem ipsum dolor sit amet.</p>
<p>Vitae nemo labore autem tempora.</p>
<p>Tenetur earum ab suscipit unde?</p>
<p>Labore eius accusantium ullam voluptatum.</p>
<p>Necessitatibus similique mollitia cumque incidunt.</p>
</div>
<div class="some">
<p>Lorem, ipsum.</p>
</div>