Fade on load doesn't work

Question

So I found this solution Using CSS for fade-in effect on page load And I've used Method 2 with raw JavaScript. Here's my code sample

JavaScript

var fadeOnLoad = function () {
  document.getElementById("wrapper").className += "load";
};
fadeOnLoad();

CSS

#wrapper {
  opacity: 0;
  transition: opacity 2s ease-in;
}

.load {
  opacity: 1;
}

Link to the website where it doesn't work https://skidle.github.io/projects/weather

And this text is crossed out in Google Dev tools

`opacity: 1 !important;` ? id selector has higher priority than class — Banzay, Feb 09 '17 at 12:37

Banzay · Accepted Answer · 2017-02-09T13:36:18.083

4

try to define

opacity: 1 !important;

id selector has higher priority than class

Here is a snippet with clear process logic. Element is invisible until body got loaded. As soon as event body onload fired, element gets opacity: 1;

function fadeOnLoad() {
  document.getElementById("wrapper").className = "";
};

#wrapper {
  transition: opacity 2s ease-in;
}

.not_loaded {
  opacity: 0;
}

<body onload="fadeOnLoad()">
<div id="wrapper" class="not_loaded">text</div>
</body>

edited Feb 09 '17 at 13:36

answered Feb 09 '17 at 12:46

Banzay

9,310
2
27
46

1

or refine your selector : `#wrapper.load{opacity:1;}` – scraaappy Feb 09 '17 at 12:48

score 1 · Answer 2 · answered Feb 09 '17 at 12:41

1

Add important to your class attribute.

.load{
      opcacity: 1 !important; //because you have id selector with opacity to 0.
      }

answered Feb 09 '17 at 12:41

Zakaria ASSANI

276
2
12

Ricky Ruiz · Answer 3 · 2017-02-09T14:17:59.990

As a good practice, try to avoid using IDs for styling.

Instead of defining the transition in the #wrapper selector, create a class containing the transition property like so:

.opacity-transition {
  transition: opacity 2s ease-in;
}

Once the transition ends, this class will not be needed any more and can be removed.

Create another class to initially hide the #wrapper element. When this class is removed it will trigger the transition.

.hidden {
  opacity: 0;
}

Code Snippet:

function fadeOnLoad() {
  //Cache the selector.
  var wrapper = document.getElementById("wrapper");
  console.log(wrapper.className);
  //Add event listener for transition end.
  wrapper.addEventListener("transitionend", function() {
    //Remove the class which is not needed anymore.
    this.classList.remove("opacity-transition");
    console.log(this.className);
  });
  //Remove hidden class to start the transition.
  wrapper.classList.remove("hidden");

};

.opacity-transition {
  transition: opacity 2s ease-in;
}
.hidden {
  opacity: 0;
}

<body onload="fadeOnLoad()">
  <div id="wrapper" class="opacity-transition hidden">
    text</div>
</body>

Fade on load doesn't work

3 Answers3

JSFIDDLE