search

madrobby / scripty2

scripty2: for a more delicious web
http://scripty2.com/
Other
516 stars 57 forks source link

Animation breaks when combining S2.FX.SlideUp & morph (w. CSS transitions enabled) #36

Open kangax opened 12 years ago

kangax commented 12 years ago

I noticed interesting issue with combining slideUp and morph, which breaks following animations when they're css-transition -based.

I stripped it down to this simple test case — http://jsfiddle.net/xBgtm/6/

Notice 2 implementations and how 1st one (slideUp + morph) breaks when CSS-transitions -based effects are enabled, whereas 2nd one works as expected.

I didn't look deep down into it, to see what exactly is going on, but I did notice transition-related styles (-transition-property, -transition-duration, etc.) NOT being removed from an element after animation is finished. This happens only when combining morph and slideUp/Down. When using standalone morph, transitions styles are removed properly. That's probably what makes the following animation fail.

Finally, I'm not fully sure, but it also looks like only morph uses CSS transitions for animation, and slideUp/Down doesn't. Is that so? And if yes, what's the reason?

Thanks!

savetheclocktower commented 12 years ago

On which browsers are you seeing this problem? I tried in Safari 5 and Chrome 15.0.874.121 and both implementations worked fine for me.

Finally, I'm not fully sure, but it also looks like only morph uses CSS transitions for animation, and slideUp/Down doesn't. Is that so? And if yes, what's the reason?

I'd have to take another look, but I think it's because slideUp/Down will rarely benefit from CSS transitions anyway. Morph uses transitions (animated, accelerated CSS transforms) only when it's able to do so without changing the meaning of the animation. But animated transforms don't work for any animation where there's re-layout of ancestors, siblings, or descendants. Consult this method for more information.

kangax commented 12 years ago

I'm seeing the problem on Chrome 17.0.942.0 dev, nightly webkit (r100987), and Safari 5.1.1.

On nightly Firefox (11.0a1) and Firefox 8, it seems to work — second animation (sliding down) happens — but there's some jerking.

rvagg commented 12 years ago

It's broken on the Linux & Windows Webkit variations I've tried (Chrome stable & Safari on Windows, Chrome beta on Linux). I don't see the jerking but the transitions aren't removed after the slide up and the slide down doesn't happen. Firefox stable & beta seem to be fine (except that the slide down only goes to auto-height but it looks like that's intended).

kangax commented 12 years ago

The jerking only happens in Firefox for me. Notice a slight flicker when 2nd effect (slide down) happens. It does go to auto-height, but that's fine; main issue is with 2nd animation simply not happening, apparently due to non-removed styles.