CSS Transition not firing with Opacity + Display

Question

I'm trying to fade a Modal in when it's clicked, and have the experience be smooth on mobile devices.

I'm setting both opacity to 0 and display to none. Setting opacity alone isn't enough, as it makes the area underneath unclickable.

#Modal {
    display: none;
    opacity: 0;
    transition: opacity 500ms ease 0s;
}

Fade in Code:

$('#Modal').show();
$('#Modal').css('opacity','100');

However, the Modal doesn't fade in, it simply pops into existence.

Setting a setTimeout here works, but who wants a click delay for the fade in?

What's the best way to fade an element in with an opacity transition without chaining together massive properties like z-index, or some such nonsense?

score 2 · Accepted Answer · edited May 23 '17 at 12:22

Toogling display property it's bad way for fade element, Similar topics were already processed e.g: CSS3 transition doesn't work with display property

"display:none; removes a block from the page as if it were never there. A block cannot be partially displayed; it’s either there or it’s not. The same is true for visibility; you can’t expect a block to be half hidden which, by definition, would be visible! Fortunately, you can use opacity for fading effects instead."

quotation author: Hashem Qolami

You should try to do this by deelay like here Animating from “display: block” to “display: none” or try toogling class like here: http://jsfiddle.net/eJsZx/19/

CSS:

.Modal {
        display: block;
        opacity: 0;
        transition: all 300ms ease 0s;
        height: 0px;
        overflow: hidden;
    }
    .ModalVisible {
        display: block;
        opacity: 1;
         height: 50px;
    }

Jquery:

$('button').on('click', function () {

     $('#ModalId').addClass('ModalVisible');
});

Html:

<div id='ModalId' class="Modal" > content <br> content </div> 
<button>show</button>

Not sure why this answer has upvotes or is marked as correct. If you look at the code, show() is used, followed by setting the Opacity, which theoretically should trigger the transition, since Opacity was previously 0. See my answer for a fix. — clayRay, May 11 '21 at 00:30

score 0 · Answer 2 · edited Apr 18 '14 at 21:13

0

Why don't you use jQuery's $("selector").fadeIn() method?

edited Apr 18 '14 at 21:13

Jason Aller

3,541
28
38
38

answered Apr 11 '14 at 09:46

d-bro82

490
1
6
21

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post - you can always comment on your own posts, and once you have sufficient [reputation](http://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](http://stackoverflow.com/help/privileges/comment). – NG_ Apr 11 '14 at 10:26
The Question was: "What's the best way to fade an element in with an opacity transition without chaining together massive properties like z-index, or some such nonsense?" My Answer is: Use .fadeIn()! – d-bro82 Apr 11 '14 at 11:22
Please, write your answers according http://meta.stackexchange.com/questions/7656/how-do-i-write-a-good-answer-to-a-question – NG_ Apr 11 '14 at 19:05
As seen [here](https://codepen.io/clayrav/pen/jOBbVmX), `fadeIn() ` doesn't work when `display` has been set to `none`, which the OP needed to do in order to make the element non-clickable – clayRay May 11 '21 at 06:12

score 0 · Answer 3 · answered May 11 '21 at 06:13

The supposedly correct answer above implies that the OP is attempting a transition on display. They are not. Calling show() will set the display property to block. Then setting the opacity should theoretically trigger the transition from opacity:0.

A similar question has been answered here. To quote @WhoTheHellIsThat, the reason the transition is not triggered is...

...because of the way styles are figured out. Style changes are expensive so they are effectively saved up until they are needed (a recalc check like .offsetHeight is called or the next frame needs to be drawn).

However the answer code in that question was Vanilla Javascript, and I couldn't make it work in jQuery. I found another answer that solved it in jQuery, using a class to trigger the transition.

Here is the full CSS...

#Modal {
    display: none;
    opacity: 0;
    transition: opacity 500ms ease 0s;
}
#Modal.fade-in {
    opacity: 1;
}

And here is the full JS:

$('#Modal').show(0, function() {
    $(this).addClass('fade-in');
});

Here is a fiddle from RoryMcRossan's answer, demonstrating the solution.

CSS Transition not firing with Opacity + Display

3 Answers3