Как применять анимацию сразу к двум элементам с анимацией. css - PullRequest
Новая
       26

Как применять анимацию сразу к двум элементам с анимацией. css

1 голос
/ 02 апреля 2020

Я работаю над простым слайд-шоу, где каждый слайд имеет свою продолжительность. Я хотел бы добавить переходы между слайдами, используя animate. css, добавляя и удаляя классы на текущем и следующем слайдах. Моя проблема в том, что при моем текущем подходе анимируется только следующий слайд (он вставляется), а текущий просто исчезает без какой-либо анимации. Я попытался определить конец текущей анимации, а затем изменить (добавить / удалить) классы, но в этом случае между слайдами был огромный разрыв ...

Как убедиться, что воспроизводятся две анимации сразу? `

var slides = $this.find('.slide');

slideIt = function(time) {
    setTimeout(function() {

        var duration = slides.eq(nextSlide).data('duration');

        slides.eq(currentSlide)
        .removeClass(animateIn)
        .addClass(animateOut)
        .hide();


        slides.eq(nextSlide)
        .removeClass(animateOut)
        .addClass(animateIn)
        .show();

        slideIt(duration);

        currentSlide = nextSlide; nextSlide ++;
        if (nextSlide == slidesLength) { nextSlide = 0;}

    },time);
};

Спасибо за помощь заранее!

Ps .: Набирая этот пост, я понял, что это должен быть .hide (), но без него только отображается первый слайд.

Ответы [ 2 ]

1 голос
/ 02 апреля 2020

Если мой первый ответ вас не устраивает, потому что вы хотите, так что решите это на стороне CSS, когда есть второй способ:

  1. Удалите .hide() в JavaScript.
  2. Убедитесь, что ваша CSS анимация заканчивается состоянием, там элемент больше не виден (например, transform: scale(0) или left: -100%).
  3. Поддерживайте это конечное состояние CSS анимация. Для этого см .: Сохранение конечного состояния в конце анимации CSS3
1 голос
/ 02 апреля 2020

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

    slides.eq(currentSlide)
    .removeClass(animateIn)
    .addClass(animateOut);
    // save the jQuery instance of the element that should be hidden.
    var $currentSlide = slides.eq(currentSlide);
    // hide this element later
    setTimeout(function() {
      $currentSlide.hide();
    }, 1000); // 1000 for 1000ms, replace that with the duration of the animateOut animation
...