CODEWITHSUNDEEP
javascript
Hasan
Hasan

Reputation: 15

Successfully adding the class into the element but not effecting the element

show class adding to the elemet but doesnt work

i am adding the show class Successfully to the element but somehow the show class is not working.

const obeserver = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add("show");
    } else {
      entry.target.classList.remove("show");
    }
  });
});
const hiddenElements = document.querySelectorAll(".hidden");
hiddenElements.forEach((el) => obeserver.observe(el));

and css

.show {
  opacity: 1;
  filter: blur(0);
  transform: translate(0);
}

.hidden {
  opacity: 0;
  transition: 1s ease all;
  filter: blur(5px);
  transform: translate(-100%);
}

Upvotes: 0

Views: 24

Answers (1)

Konrad
Konrad

Reputation: 24651

.show is before .hidden in the css file

Swap the order:

.hidden {
  opacity: 0;
  transition: 1s ease all;
  filter: blur(5px);
  transform: translate(-100%);
}

.show {
  opacity: 1;
  filter: blur(0);
  transform: translate(0);
}

Upvotes: 1

Related Questions