Почему не появляются элементы при использовании IntersectionObserver?

Question

[AlexandraWeather]

Хотела сделать анимацию появления элементов при скролле при помощи IntersectionObserver, сделала по инструкции, но элементы не появляются. Что я делаю не так?

Comments

[Rsa97]

Чтобы понять, что вы сделали не так, надо понять, что вы вообще сделали. Код где?

[AlexandraWeather]

Rsa97, почему-то тут не отображается моя ссылка на кодпэн. Так попробую
https://codepen.io/EugeniaAntonova/pen/vYbjaxP?edi...

[Rsa97]

AlexandraWeather, В этом коде нет IntersectionObserver'а.

[AlexandraWeather]

Rsa97, с 16 по 31 строку в разделе js

const blocks = document.querySelectorAll('.block');

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    entry.target.classList.toggle('show', entry.isIntersecting);
    // if (entry.isIntersecting) {
    //   observer.unobserve(entry.target);
    // }
  })
}, {
  threshold: 1.0,
});

blocks.forEach(block => {
  observer.observe(block);
});

[Rsa97]

AlexandraWeather,

[AlexandraWeather]

Rsa97, это все, что показывается?! здорово

const blocks = document.querySelectorAll('.block');

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    entry.target.classList.toggle('show', entry.isIntersecting);
    // if (entry.isIntersecting) {
    //   observer.unobserve(entry.target);
    // }
  })
}, {
  threshold: 1.0,
});

blocks.forEach(block => {
  observer.observe(block);
});

<div class="page">
  <div class="header"></div>
  <div class="container">
    <div class="block" id="block1"></div>
    <div class="block yellow" id="block2"></div>
    <div class="block green" id="block3"></div>
  </div>
</div>

body {
  margin: 0;
  padding: 0;
}
.page {
  height: 2000px;
  background-color: #e5e5e5;
  background-position: 43px -14px, 0px 29px;
  background-size: 86.4px 86.4px;
  background-repeat: repeat;
  background-image: radial-gradient(circle, white 11px, transparent 12px), radial-gradient(circle, white 11px, transparent 12px);
}

.header {
  height:80px; 
  width:100%;
  position:sticky;
  top:0;
  left:0;
  right:0; 
  z-index: 100;
  background-color:rgba(0,0,0,0.3);
  box-shadow: 0 10px 15px -5px rgba(0,0,0,.8)
}

.container {
  width: 1110px;
  padding: 50px 15px;
  margin: 0 auto;
  background-color: rgba(255,255,255,0.3);
  box-shadow: 0 10px 15px -5px rgba(0,0,0,.8)
}

.block {
  width: 500px;
  height: 300px;
  background-color: pink;
  border-radius: 16px;
  transform: scale(1) translateX(-500%);
}

.block.show {
  animation-name: slide-in;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

.block:not(:last-of-type) {
  margin-bottom: 20px;
}

.block.yellow {
  background-color: gold;
}

.block.green {
  background-color: yellowgreen;
}

@keyframes slide-in {
  0% {
    opacity: 0;
    filter: blur(160px);
    transform: scale(0.1) translateX(-500%);
  }
  
  100% {
    opacity: 1;
    filter: blur(0px);
    transform: scale(1) translateX(0);
  }
}

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

Answer 1

[Rsa97]

А что должно происходить, если ваши блоки убраны за экран через translateX(-500%)?
Естественно, они не пересекаются с вьюпортом браузера и никакого события не создаётся.
Вторая проблема - если вернуть блоки на экран убрав translateX, то toggle('show', entry.isIntersecting) приведёт к тому, что когда блок полностью окажется на экране, он тут же будет убран с экрана анимацией, сгенерируется новое событие по исчезновению блока, блок снова переместится на экран, сгенерируется событие, блок будет убран с экрана и так до бесконечности.

Comments

[AlexandraWeather]

ааа
а я думала, что раз при таком сдвиге элементов за ними остается их место на странице, то и пересечение по этому месту считаться будет
спасибо большое, буду исправлять

[AlexandraWeather]

стили исправила, но теперь все блоки появляются одновременно и не исчезают, когда выскроливаются из вьюпорта
что еще я сделала неправильно?
может теперь нормально загрузится пример https://codepen.io/EugeniaAntonova/pen/vYbjaxP

[Rsa97]

AlexandraWeather, Сейчас происходит следующее:
При отрисовке появлении блоков для каждого сразу генерируется событие с isIntersecting: false. Блокам добавляется класс show. Блоки выезжают на экран, для полностью появившегоя блока снимается наблюдение, после чего он всегда остаётся в основном потоке.

[AlexandraWeather]

Rsa97, а почему они все одновременно появляются, если я поставила threshold 1? нижние же не должны появляться, пока я до них не домотаю?

[Rsa97]

AlexandraWeather, Сейчас закомментирван. А когда я смотрел, не был закомментирован. И класс show устанавливался при любом событии, что при появлении (isIntersecting: true), что при исчезновении (isIntersecting: false).

А сейчас у вас снова та же ситуация. При открытии страницы по первому блоку приходит событие c isIntersecting: true. Включается анимация, блок исчезает с экрана, приходит событие с isIntersecting: false, анимация отменяется, блок появляется на экране и так по кругу.

Чего вы хотите добиться то в результате?

[AlexandraWeather]

большое спасибо) все исправила!