Можно ли создать скролл в универсальном переходе Stylus mixin?

Question

JavaScript:

const show = entries => entries[0].isIntersecting ? entries[0].classList.remove('is-hidden') : null;
const observer = new IntersectionObserver(show, {threshold:0});
Array.from(document.querySelectorAll('.js-hidden')).forEach(element => observer.observe(element));

Я хочу воспроизвести эффект постепенного исчезновения, когда класс '.js-hidden' удален, как показано ниже ... но этот код не работает:

HTML:

<div class="my-component js-hidden is-hidden">
    <p class="text text-1">Hello</p>
    <p class="text text-2">World</p>
</div>

Стилус:

fadeIn(duration=1s, delay=0s) {
    opacity: 1;
    transition: opacity duration ease delay;
    &.is-hidden { // <- yeah, this is wrong... but, any ideas? I want to apply transition both element and pseudo element.
        opacity: 0;
    }
}

.my-component {
    .text,
    &::before,
    &::after {
        fadeIn();
    }
    .text-2 {
        transition-delay: .3s;
    }
    &::before {
        content: 'foo';
        transition-delay: .5s;
    }
    &::after {
        content: 'bar';
        transition-delay: .7s;
    }
}

А если элементы затухания более вложенные?

<div class="my-component js-hidden is-hidden">
    <div class="wrapper-1">
        <div class="wrapper-2">
            <p class="text text-1">Hello</p>
            <p class="text text-2">World</p>
        </div>
    </div>
</div>

Я хочу применить переход как элемент, так и псевдоэлемент.но я не знаю, что мне делать ...

Спасибо.

---

Наконец-то ...

Спасибо, Энди.

Наконец-то я получил код ниже.XD

JavaScript:

const show = entries => entries[0].isIntersecting ? entries[0].target.classList.remove('is-hidden') : null;
const observer = new IntersectionObserver(show, {threshold:0});
Array.from(document.querySelectorAll('.js-hidden')).forEach(element => observer.observe(element));

HTML:

<div class="my-component js-hidden is-hidden">
  <p class="text text-1">Hello</p>
  <p class="text text-2">World</p>
  <p class="text text-3">Hello</p>
  <p class="text text-4">World</p>
  <p class="text text-5">Hello</p>
  <p class="text text-6">World</p>
  <p class="text text-7">Hello</p>
  <p class="text text-8">World</p>
  <p class="text text-9">Hello</p>
</div>

Стилус:

fadeIn(target, duration=1s, delay=0s, property=all, easing=ease) {
    {target} {
        opacity: 1;
        transition: duration property easing delay;
    }
    &.is-hidden {
        {target} {
            opacity: 0;
        }
    }
}

.my-component {
    duration = .3s;
    delay = 1s;
    fadeIn('.text', duration:duration, delay:delay);
    fadeIn('&::before', duration:duration, delay:delay);
    fadeIn('&::after', duration:duration, delay:delay);

    interval = duration;
    amount = 9;
    for i in 2..amount {
        .text-{i} {
            transition-delay: (interval * (i - 2) + duration + delay)s;
        }
    }

    &::before {
        content: 'FOOOOOOOOOOOOOOO';
        transition-delay: (interval * ((amount + 1) - 2) + duration + delay)s;
    }
    &::after {
        content: 'BARRRRRRRRRRRRRR';
        transition-delay: (interval * ((amount + 2) - 2) + duration + delay)s;
    }
}

Answer 1

Во-первых, кажется, вы ищете transition, а не animation.Я не Stylus эксперт, но знаю IntersectionObserver и CSS довольно хорошо.У меня сейчас работает базовая демонстрация.

Несколько замечаний о скорректированной функции fadeIn.

• is-hidden - это класс, который существует в DOM с самого начала, поэтому cuetransition когда он не там
• использует шаблон делегата из переходов, то есть изменение родительского элемента влияет на детей (не слушайте класс для каждого ребенка/ псевдоэлемент)

fadeIn(duration=1s, delay=0s) {
  .text,
  &::before,
  &::after {
    opacity: 0;
    transition: 0.5s opacity ease;
  }

  &:not(.is-hidden) {
    .text,
    &::before,
    &::after {
      opacity: 1;
    }    
  }  
}

Кроме того, я не смог заставить ваш JavaScript работать из-за некоторых ошибок и переписал его в соответствии с демо.Вот переписанное JavaScript:

const components = document.querySelectorAll(".my-component");

const observer = new IntersectionObserver(components => {
  components.forEach(component => {
    if (component.intersectionRatio > 0) {
      component.target.classList.remove("is-hidden")
    } else {
      component.target.classList.add("is-hidden")
    }
  })
});

Array.from(document.querySelectorAll(".js-hidden")).forEach(element =>
  observer.observe(element)
);

CodePen Demo