[Solved] Changing display and opacity with CSS animation

by


You should separate setting the display property from setting the properties involved in the animation. If you set them in one round the animations won’t run (the problem is with display: none). One way is to do a setTimeout.

Also, my suggestion is to never change style properties from JS, always manipulate classes for better separation. Something like this will do:

var $foo = $('#foo').addClass('display');
 
setTimeout(function () {
  $foo.addClass('show');
});
 
#foo {
  transition: opacity 1s ease-in-out;
  opacity: 0;
  display: none;
}

#foo.display {
  display: inline-block;
}

#foo.show {
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id='foo'>Foo</button>

1

solved Changing display and opacity with CSS animation