Задержанные боксы FadeIn-Анимация - PullRequest
Новая
       13

Задержанные боксы FadeIn-Анимация

1 голос
/ 05 января 2020

Я создал эффект постепенного появления отдельных элементов (.boxes > div), когда пользователь прокручивает сайт вниз. С помощью Javascript я проверяю, прокручивается ли элемент в представление, а затем добавляю класс .fadeInUp, чтобы добавить эффект анимации.

Таким образом я sh смог постепенно исчезнуть в другом элементе после другого элемента с помощью animation-delay: 

.fadeInUp {
    & + .fadeInUp {
        animation-delay: 300ms;
        & + .fadeInUp {
            animation-delay: 600ms;
            & + .fadeInUp {
                animation-delay: 900ms;
                & + .fadeInUp {
                    animation-delay: 1200ms;
                    & + .fadeInUp {
                        animation-delay: 1500ms;
                    }
                }
            }
        }
    }

    opacity: 0;
    animation: fadeInUp 1000ms forwards;
}

Однако я хочу сократить свой код S CSS до , выбрать следующий родной класс с тем же именем класса , потому что, если я добавлю коробки к части HTML, мне также нужно добавить animation-delay к части S CSS.

Вопрос:

Можно ли сократить это поведение с помощью встроенного CSS (или S CSS альтернативно), не зная, сколько ящиков будет будь там? Что-то вроде 

& + * { ... }

, но указание c для класса .fadeInUp, а также увеличение значения animation-delay на 300 мс с каждым следующим классом братьев и сестер?

, который я создал это перо, чтобы продемонстрировать мой вопрос и сделать его более понятным:

CodePen: Отложенные блоки FadeIn-Animation

enter image description here

1 Ответ

1 голос
/ 06 января 2020

Насколько я знаю, я думаю, что это невозможно сделать с помощью чистого CSS решения.

В будущем это может быть решение, которое вы ищете: stackoverflow.com / questions / 43539203 / use- css -counter-in-cal c. Сейчас я бы добавил e.style.animationDelay=i*300+"ms"; в ваш l oop и позволил бы javascript сделать ... «грязную работу». 

function inView(el) {
    let box = el.getBoundingClientRect();
    return box.top < window.innerHeight && box.bottom >= 0;
}

const boxes = document.querySelectorAll('.boxes >  div');


window.onscroll = (w) => {
  boxes.forEach((e, i) => {
    e.style.animationDelay=i*300+"ms";
    if (inView(e)) {
        e.classList.add('fadeInUp');
    }

  });
}
body {
  height: 2000px;
  display: grid;
  justify-items: center;
}

.boxes {
  margin-top: 1000px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 300px;
  grid-gap: 30px;
  justify-items: center;
  width: 80%;
}
  
.boxes div {
  height: 300px;
  width: 300px;
  box-shadow: 0 0 15px #ccc;
  background-image: url(https://images.unsplash.com/photo-1542141372-98a047557466?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
  background-size: cover;
}

.boxes div:nth-child(2) {
  background-image: url(https://images.unsplash.com/photo-1522057306606-8d84daa75e87?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
}

.boxes div:nth-child(3) {
  background-image: url(https://images.unsplash.com/photo-1505870136463-c17bc84b30a2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
}

.boxes div:nth-child(4) {
  background-image: url(https://images.unsplash.com/photo-1524419986249-348e8fa6ad4a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
}

.boxes div:nth-child(5) {
  background-image: url(https://images.unsplash.com/photo-1561336313-0bd5e0b27ec8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
}

.boxes div:nth-child(6) {
  background-image: url(https://images.unsplash.com/photo-1514828980084-9462f7d03afc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
}    

.fadeInUp {
  opacity: 0;
  animation: fadeInUp 1000ms forwards;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
<html>
  <body>
    <div class="boxes">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>

PS что использовать: nth-child (n + ...) для создания похожий результат? Что-то вроде: 

.boxes div:nth-child(3n+1){
  animation-delay:300ms;
}

.boxes div:nth-child(3n+2){
  animation-delay:600ms;
}

.boxes div:nth-child(3n+3){
  animation-delay:900ms;
}


function inView(el) {
    let box = el.getBoundingClientRect();
    return box.top < window.innerHeight && box.bottom >= 0;
}

const boxes = document.querySelectorAll('.boxes >  div');


window.onscroll = (w) => {
  boxes.forEach((e, i) => {
    if (inView(e)) {
        e.classList.add('fadeInUp');
    }
  });
}
body {
  height: 2000px;
  display: grid;
  justify-items: center;
}

.boxes {
  margin-top: 1000px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 300px;
  grid-gap: 30px;
  justify-items: center;
  width: 80%;
}
  
.boxes div {
  height: 300px;
  width: 300px;
  box-shadow: 0 0 15px #ccc;
  background-image: url(https://images.unsplash.com/photo-1542141372-98a047557466?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
  background-size: cover;
}

.boxes div:nth-child(2) {
  background-image: url(https://images.unsplash.com/photo-1522057306606-8d84daa75e87?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
}

.boxes div:nth-child(3) {
  background-image: url(https://images.unsplash.com/photo-1505870136463-c17bc84b30a2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
}

.boxes div:nth-child(4) {
  background-image: url(https://images.unsplash.com/photo-1524419986249-348e8fa6ad4a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
}

.boxes div:nth-child(5) {
  background-image: url(https://images.unsplash.com/photo-1561336313-0bd5e0b27ec8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
}

.boxes div:nth-child(6) {
  background-image: url(https://images.unsplash.com/photo-1514828980084-9462f7d03afc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
}    

.fadeInUp {
  opacity: 0;
  animation: fadeInUp 1000ms forwards;
}

.boxes div:nth-child(3n+1){
  animation-delay:300ms;
}

.boxes div:nth-child(3n+2){
  animation-delay:600ms;
}

.boxes div:nth-child(3n+3){
  animation-delay:900ms;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
<html>
  <body>
    <div class="boxes">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...