CODEWITHSUNDEEP
javascriptjquerycssanimationtransition
Jake
Jake

Reputation: 225

CSS Transitions not transitioning

So I have the following JS : 

$('.metric-number, .compareToTotal').css({opacity : "0"}).on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
    $(this).css('display', 'none');
    $('.forum-select-button').css({'display' : 'inline-block',
                                   'opacity' : '1'});
});

And the CSS : 

.metric-number, .compareToTotal, .forum-select-button{
    -webkit-transition: opacity 500ms ease-in-out;
    -moz-transition: opacity 500ms ease-in-out;
    -o-transition: opacity 500ms ease-in-out;
    transition: opacity 500ms ease-in-out;
}

So the initial animation works, but the animation on the .forum-select-button does not perform the transition, but simply sets the opacity to 1.0. It is a Bootstrap button element if that helps, though I don't think its the element, because I've switched the rolls and then the '.metric-number' and '.compareToTotal' elements don't animate.

Upvotes: 1

Views: 96

Answers (1)

Miguel
Miguel

Reputation: 20633

Transitions don't run when setting the display property. (see list of animatable properties)

A workaround is to set the height to 0:

.forum-select-button {
  height: 0;
  opacity: 0;
}

Then set the height to auto:

  $('.forum-select-button').css({
    'height': 'auto',
    'opacity': '1'
  });

JSFiddle Demo

Another approach is set animation keyframes and toggle a class when you want to show and hide the element.

JSFiddle Demo

Related:

Upvotes: 2

Related Questions