CSS анимация происходит при прокрутке, а не при загрузке страниц - PullRequest
Новая
       7

CSS анимация происходит при прокрутке, а не при загрузке страниц

4 голосов
/ 29 июня 2019

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

Вот мой элемент стиля: 

.slick-slide:nth-child(odd) {
    -webkit-animation-name: fadeInLeft;
    -moz-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-duration:1s;
    animation-delay: 1s;
}

и вот мои ключевые кадры 

@-webkit-keyframes fadeInLeft {
    from {
        opacity:0;
        -webkit-transform: translatex(-10px);
        -moz-transform: translatex(-10px);
        -o-transform: translatex(-10px);
        transform: translatex(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
}
@-moz-keyframes fadeInLeft {
    from {
        opacity:0;
        -webkit-transform: translatex(-10px);
        -moz-transform: translatex(-10px);
        -o-transform: translatex(-10px);
        transform: translatex(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
}
@keyframes fadeInLeft {
    from {
        opacity:0;
        -webkit-transform: translatex(-100px);
        -moz-transform: translatex(-100px);
        -o-transform: translatex(-100px);
        transform: translatex(-100px);
    }
    to {
        opacity:1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
}

Ответы [ 2 ]

3 голосов
/ 04 июля 2019

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

Один из способов сделать это - использовать API-интерфейс Intersection Observer (если вам нужна совместимость со старымв браузере есть полифилы, доступные онлайн). 

let observer = new IntersectionObserver(updates => {
    updates.forEach(update => {
        if (update.isIntersecting) {
            update.target.classList.add('visible');
        } else {
            update.target.classList.remove('visible');
        }
    });
}, { threshold: 0 });

[...document.querySelectorAll('.element')].forEach(element => observer.observe(element));

Примечание: этот метод не будет работать (или, по крайней мере, потребует некоторых настроек), если ваша анимация заставит ваш элемент полностью отойти в сторону экрана, так какон никогда не пересечется с окном просмотра или не запустит обратную анимацию перед завершением.

Пример JSFiddle

2 голосов
/ 05 июля 2019

Итак, поехали ...

Прежде всего я отделил анимацию от самого селектора и создал совершенно новый класс, который содержит только информацию об анимации, и добавил свойство animation-fill-mode:forwards, чтобы анимация заканчивалась на ключевом кадре 100%. Я добавил это, чтобы исходный класс имел opacity:0:

CSS: 

.slick-slide:nth-child(odd) {
  opacity:0;

}
.slick-slide.anim:nth-child(odd) {
  -webkit-animation-name: fadeInLeft;
  -moz-animation-name: fadeInLeft;
  -o-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -o-animation-duration: 1s;
  animation-delay: 1s;
  -webkit-animation-fill-mode:forwards;  // added
  animation-fill-mode:forwards;          // added
}

Тогда вам нужен этот Javascript: 

$(window).on('load scroll', function() {
    var scrollTop = $(window).scrollTop(),
        windowHeight = $(window).height(),
        threshold = 200;

  $('.slick-slide:nth-child(odd)').each(function() {
        var offTop=$(this).offset().top;
    if ((scrollTop+windowHeight) > offTop) { // you can add -threshold here as scrollTop+windowHeight-threshold in pixels
    $(this).addClass('anim');
    }
  });
});

Что делает Javascript: как только один из классов селектора появится на экране - вычисляя окно scrollTop минус окно height, тогда класс anim применяется к селектору. Я также добавил необязательную переменную threshold, которую вы можете использовать для изменения точки, где запускается анимация - например, 200px на экране.

Я добавил некоторые стили к элементам slick-slide в примере, чтобы некоторые из них изначально были за кадром.

Вот рабочая скрипка. https://jsfiddle.net/tun51xq6/1/

...