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

Open
kangax opened this Issue Nov 23, 2011 · 4 comments

Comments

Projects
None yet
3 participants

kangax commented Nov 23, 2011

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!

Collaborator

savetheclocktower commented Nov 23, 2011

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 Nov 24, 2011

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 Nov 24, 2011

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 Nov 24, 2011

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment