CSS transition not occurring with addClass function

Question

What I want to do:

Add a new element to my DOM and animate its opacity with css3.

My solution

A div ".bar.fade" is added via JavaScript and then a class "in" will instantly added.

Problems with my solution

Without using the setTimout() function, the div will instantly be drawn visible (without css transition). Why does this happen and how to prevent it? I assume, using setTimeout() isn't the best practice, is it?

SCSS

.bar
{

  position: absolute;
  bottom: 0;
  top: 0;
  width: 100%;
  background-color: red;
  z-index: -1;
  opacity: 0;
  visibility: hidden;

  &.fade
    {
        @include transition(
            visibility .75s ease-in-out,
            opacity .75s ease-in-out
        );
    }

    &.in
    {
        opacity: 1;
        visibility: visible;
    }
}

JS (Zepto)

$('.foo').on('click', function() {
    $('body').append('<div class="bar fade"></div>');
    $('.bar').addClass('in');
});

$('.fooDelay').on('click', function() {
    $('body').append('<div class="bar fade"></div>');

    setTimeout(function(){
        $('body > .bar').addClass('in');
    }, 50);
});



$('.fooRemove').on('click', function(){
    $('body').find('.bar').remove();
})

I've made a codepen for better testing: http://codepen.io/dschu/pen/wBVmLp

Using `setTimeout()` is fine - without it, the browser will just wait to update the layout until the whole "click" event loop is finished. — Pointy, Apr 15 '15 at 13:16
@isherwood: Thanks for your hint. I was able to improve my code as the following: http://codepen.io/dschu/pen/VYoxjP — dschu, Apr 15 '15 at 13:20

score 1 · Answer 1 · answered Apr 15 '15 at 13:21

In order to add an animation with pure CSS you need to define the animation inside the element and then also define the keyframe of the animation. But you could do it also in other ways this is just one way that also allow you to add more animation states or keyframes.

Add inside leaving all the css properties you defined

.bar{
    -webkit-animation-name:fadeInCSS3;
    -moz-animation-name:fadeInCSS3;
    -ms-animation-name:fadeInCSS3;
    -o-animation-name:fadeInCSS3;
    animation-name:fadeInCSS3; 
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    -ms-animation-duration:1s;
    -o-animation-duration:1s;
    animation-duration:1s;
}

and then add the keyframes for example

@-webkit-keyframes fadeInCSS3 {
    0% {
        display:none; 
        opacity: 0;
    }

    1% {
        display: block ; 
        opacity: 0;
    }

    100% {
        display: block ; 
        opacity: 1;
    }
}

Look at my quick edit to your codepen:

http://codepen.io/alexincarnati/pen/MYNGKR

Click on the first button to see it in action.

Thanks for your answer Alex, but I've just rewritten it like the following: http://codepen.io/dschu/pen/VYoxjP and marked my question as duplicate. — dschu, Apr 15 '15 at 13:25
Hi, you are welcome. I still see the old codepen...what's the actual issue you are having? — Alessandro Incarnati, Apr 15 '15 at 13:26
Check out line 8: $('body > .bar').css('opacity'); This seems to trigger the browser to "calculate" (?) the current opacity (which is 0 at this time). After that I can just add the class "in" to start the transition. Seems to be cleaner than setTimeout() — dschu, Apr 15 '15 at 13:28

CSS transition not occurring with addClass function

1 Answers1