0

I've got an element, when it's parent's class changes, gets different display and width properties.

I would like to transition just the width property, but the transition doesn't get applied if the display property changes - even though the display property isn't being transitioned.

JSFiddle here: http://jsfiddle.net/B6k3j/.

You can see .none-content doesn't get any properties transitioned (I've also transitioned background-color for visual effect) because it is changing from display:none to display:inline-block. The .ib-content element however, whose display property doesn't change, transitions fine.

To be clear: I'm not trying to transition the display property, the display property just happens to be changing at the same time I want the transition to apply.

Sidenote: I have an example using animations, but it has odd behaviour & I'd like to support IE9 if possible: http://jsfiddle.net/VeAy2/1/

Quasipickle
  • 4,383
  • 1
  • 31
  • 53
  • You cannot transition the `display` property at all. So you would have to restrict the `transition:all`...perhaps like this - http://jsfiddle.net/Paulie_D/B6k3j/1/ – Paulie_D Aug 01 '14 at 16:28
  • possible duplicate of [Transitions on the display: property](http://stackoverflow.com/questions/3331353/transitions-on-the-display-property) – Paulie_D Aug 01 '14 at 16:29
  • @Paulie_D - your fiddle still doesn't work, and this isn't a duplicate because I explicitly stated I'm NOT trying to transition the display property. – Quasipickle Aug 01 '14 at 16:41
  • 1
    @Pickle You cannot animate in other properties at the same time as display. Meaning you will need to either change the display, *then* transition the other properties or not have `display:none` at all – Zach Saucier Aug 01 '14 at 17:53
  • @ZachSaucier I believe you (and the example would confirm it) - but is there any documentation on why this is the case? I don't see why logically this should be the case. – Quasipickle Aug 01 '14 at 17:55
  • because you can't animate an element that has `display:none`. It takes time before you can animate anything that wasn't displayed – Zach Saucier Aug 01 '14 at 17:58
  • I wouldn't have thought the browser would consider the element to have display:none, as that property gets changed at the same instant the animatable property changes. – Quasipickle Aug 01 '14 at 20:00

0 Answers0