0

сейчас я разбираюсь с анимационными эффектами с помощью css и javascript и хочу реализовать алгоритм похожий на VueJs чтобы лучше понимать как это все работает и вот столкнулся с несколькими проблемами и вопросами.

  1. Почему в обработчике события для 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');
    
  2. Почему settimeout это исправляет?

  3. Почему опять же если я чуть меняю алгоритм и здесь уже сразу после 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>

1 ответ 1

1

В теории все должно работать, но на практике получается все не так, анимация во все не работает, js вообще не ставит класс enter, я конечно догадываюсь, что это такая оптимизация браузера и что типа браузер видит добавление, а потом удаление класса и вообще его не ставит, но все равно я не понимаю как это работает и почему.

Так и есть, это оптимизация: ( статья и еще одна )

Браузер компонует вместе несколько запросов на reflow и repaint, и выполняет их единожды, оптимизируя свою работу.

Поэтому в вашем случае, применится только последний класс, на тот момент, как будет вызван repaint/reflow.

setTimeout откладывает выполнение, указывая ноль, мы просто говорим браузеру, что бы он поставил выполнение функции в следующий кадр ( цикл event loop ). Поэтому один кадр будет отрисован с класс enter, а потом уже добавится класс enter-active

К тому же сами подумайте, сколько именно должно пройти времени между этими строками?

elem.classList.add('enter');
// браузер не станет сразу отрисовывать новые стили
elem.classList.add('enter-active');
elem.classList.remove('enter');
// тут отрисовка начнется, класс enter уже нет
3
  • Спасибо большое за ответ! А вот исходя из этого получается что браузер не сразу отрисовывает новые стили, а тогда в какой момент времени он начинает это делать ? Не в конце же скрипта 15 авг 2018 в 15:16
  • elem.classList.add('enter'); elem.classList.add('enter-active'); setTimeout(function() { elem.classList.remove('enter'); }, 0); и вот почему в этом фрагменте анимация тоже не сработает? Потому что браузер добавит эти стили одновременно ? 15 авг 2018 в 15:18
  • @НикитаАнтонов habr.com/company/oleg-bunin/blog/417461 вот еще почитать
    – ThisMan
    16 авг 2018 в 14:44

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.