Transform property on Opacity

HTML & CSS
1 
.wrapper {
  padding: 0px;
  margin: 0px;
  opacity: 1;
}

Then,

body.active .wrapper {
 opacity: 0.05;
}

How should I put transform/translate on opacity?

I tried this:

.wrapper {
  padding: 0px;
  margin: 0px;
  opacity: 1;
  transition: opacity 2s ease 2s;
}

It is not working.

2

How is the body class changing?

3

Like this:

(function (evt) {
  const openModal  = evt.querySelector(".searchicon");
  const closeModal = evt.querySelector(".modalclose");
  openModal.addEventListener("click", modalClick);
  closeModal.addEventListener("click", modalClick);
  
  function modalClick(e) {        
    const heyModal  = document.querySelector("body");  
          heyModal.classList.toggle('active');
          e.preventDefault();
  }
})(document);
4

Works for me.

1 Like
5

The problem is identified now, and the problem was that there was no problem.

Delay + Duration were both set to 2s each. so I could not experience and interpret that it was actually working.

Thank you for helping. Thank you so much.

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.