javascript - CSS transition opacity only from 0 to 1, or alternative transition effect

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.

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:

Share Improve this question edited Feb 11, 2019 at 20:52 asked Feb 11, 2019 at 20:08 user1798707 3611 gold badge4 silver badges12 bronze badges

What do you mean by "when another page is loaded"? – guest271314 Commented Feb 11, 2019 at 20:15
So, after setting the opacity to 1, set the transition to none so the effect will cease. – Scott Marcus Commented Feb 11, 2019 at 20:20
"By loading another page I mean that the whole content of the div changes" Why would inserting new HTML into the element cause the opacity of the element to change? Do you mean if or when the window is reloaded? Can you include the complete JavaScript at the question? See stackoverflow.com/help/mcve – guest271314 Commented Feb 11, 2019 at 20:22
@guest271314 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. – user1798707 Commented Feb 11, 2019 at 20:43
Have you considered including that description of the actual problem at the question? "when another page is loaded" is ambiguous. – guest271314 Commented Feb 11, 2019 at 20:49

| Show 2 more comments

2 Answers 2

Sorted by: Reset to default 17

I would add a class which is responsible for the transition. If you only add the transition rule only within the class, you'll get the one-way transition you're after:

document.querySelector('button').addEventListener('click', () => {
  document.querySelector('.app').classList.toggle('change');
});

.app {
  background-color:#f8f8f8;
  opacity:0;
}

.app.change {
  opacity: 1;
  transition: all 1s;
}

<div class="app">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad nesciunt adipisci, ab ea deleniti ullam eius alias aperiam, explicabo dolore nihil, ex dolores perferendis. Commodi ipsa dignissimos magni consectetur soluta!</div>

<button>toggle opacity</button>

You can add the transition property only when you want it to animate. I'll show you how to do it with two classes.

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

...

document.getElementById("app").classList.add('is-loaded');

Now when you remove that class, the opacity won't have a transition back to 0.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - CSS transition opacity only from 0 to 1, or alternative transition effect - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)