Linked Questions

Popular Questions

I have a div element in which all my HTML are inserted. I want to create a fade in effect when the content of this div changes. Currently I set the opacity to 0 before inserting something to this div and then set it to 1, so that the effect takes place. The problem with my CSS is that is works for both cases, either for going from 0 to 1 or 1 to 0. Is there a way to make it work only when transitioning from 0 to 1; Is there a better alternative for transitioning from one page to another in a single page app?

HTML

<!DOCTYPE html>
<html>
<!-- Imports -->
    <body>
        <div id="app" class="app"></div>
     </body>
</html>

CSS

.app
{
    background-color:#f8f8f8;
    opacity:0;
    transition: all 1s;
   -webkit-transition: all 1s;
}

Javascript

When the page loads the opacity is set to 1 and the effect takes place:

document.getElementById("app").style.opacity='1';

The problem occurs when another page is loaded, where the opacity is now set to 0, thus making the transition take effect again.

Edit Updated with better explanation of the problem:

The opacity of the element does not change. What I want for the opacity is only to work when going from 0 -> 1, so that before I insert new content is set to 0 again (thus making the effect taking place, this is the problem) and when all the data have been inserted, a fade in (opacity going from 0 to 1) effect will take place.

Related Questions