CSS Transitions not transitioning

Question

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.

Are you trying to show the animation when passing throught the button? If you do, I think you should use a selector as `:hover` — horro, Apr 15 '15 at 22:29
No sorry, this happens after an onclick event for another button. — Jake, Apr 15 '15 at 22:30

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

2

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

Transitions on the display: property

edited May 23 '17 at 12:28

Community

1
1

answered Apr 15 '15 at 23:04

Miguel Mota

20,135
5
45
64

You may have to set overflow:hidden if the button has children. – James G. Apr 15 '15 at 23:06
1

[Here is a useful list of CSS animated properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties). – misterManSam Apr 15 '15 at 23:10
Humm, this does fix my issue. Completely messes my styling though. I'm gonna leave it open a tad longer to see if someone gets it before I re-do my styling. – Jake Apr 15 '15 at 23:15
Ohh man, that looks like exactly what I want! The hidden element doesn't even occupy space. Lemme see if I can integrate it :D. – Jake Apr 15 '15 at 23:37
Yup, that fiddle is exactly what I wanted. Had to make some minor changes but its perfect now! – Jake Apr 15 '15 at 23:50

CSS Transitions not transitioning

1 Answers1