-4

I have the following button :

HTML : 

<button id='foo' style='display: none; opacity: 0'>Foo</button>

CSS : 

    #foo {
      transition: opacity .5s ease-in-out;
      -moz-transition: opacity .5s ease-in-out;
      -webkit-transition: opacity .5s ease-in-out;
    }

JS : 

  $('#foo').css('display', '');
  $('#foo').css('opacity', '');

It's working in a sense, the button does appear, but without the animation. So I am not sure what's the issue here. Does anyone have any idea ?

Also, I don't want suggestions mentioning visibility because that's not the point here. Thanks !

Scipion
  • 11,449
  • 19
  • 74
  • 139

2 Answers2

2

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>
kapa
  • 77,694
  • 21
  • 158
  • 175
1

The primary issue that's stopping your example from working is because you're changing the display state of the element. Remove the display setting and your code works fine: https://jsfiddle.net/RoryMcCrossan/pcp2x53m/

That being said there are a couple of issues. Firstly, don't set a property to ''. There are default values which they should be set to instead. Secondly, use classes as it is better practice.

If you require the element to be set to display: none by default then you need to wait for the element to be set to display: block before you set its opacity and allow the transition to begin.

Here's a fully working example:

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

#foo {
  display: none;
  opacity: 0;
  -webkit-transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  transition: opacity .5s ease-in-out;
}
#foo.fade-in {
  opacity: 1;
}

<button id="foo">Foo</button>

Example fiddle

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
  • Sorry but it doesn't answer the question at all. First of all, the example is indeed very dumb, so there is no point saying so. Second, the purpose here is to switch the display and then switch the opacity and have the animation working once the opacity is changing after the display has already changed. So your answer doesn't answer that. I mean, "what you want to do is not feasible" may be the right answer. But not yours sorry. – Scipion Jan 13 '16 at 10:47
  • 2
    `First of all, the example is indeed very dumb, so there is no point saying so.` Where did I say the example was dumb? – Rory McCrossan Jan 13 '16 at 10:47
  • Sorry but at this point it's basically playing the grammar nazi, and being surprised when people ask you not to do so ... – Scipion Jan 13 '16 at 10:49