Skip to main content

Search and Top Navigation

#9052 closed feature (worksforme)

Opened February 03, 2013 05:57PM UTC

Closed February 03, 2013 07:25PM UTC

switchClass should animate descendants

Reported by: xskater Owned by:
Priority: minor Milestone: none
Component: ui.effects.core Version: 1.10.0
Keywords: Cc:
Blocked by: Blocking:
Description

I was hoping to use this as a clean shortcut. I wanted to use the body's class to define the styles of descendant elements, as per normal css. If body is "read" then a column with text takes the whole page; when "edit" is applied another column expands from the side. But, in animating the changes I am left with no animation and a jump to end. The work-around is to apply the classes to each element that needs custom changes and instead of body.read element I use element.read

This would leave much cleaner code if it were possible!

Attachments (0)
Change History (3)

Changed February 03, 2013 06:54PM UTC by xskater comment:1

_comment0: I have made this example available through jsbin @ http://jsbin.com/usivec/1 \ \ I have both the workaround ("Settings" button) and the current example of the not-animating-and-jumping-to-end ("Color Switch" button) in application.1359917798299395
_comment1: I have made this example available through jsbin @ http://tiny.cc/di1xrw (using tiny to monitor clicks) \ \ I have both the workaround ("Settings" button) and the current example of the not-animating-and-jumping-to-end ("Color Switch" button) in application.1359917975529558

I have made this example available through jsbin @ http://tiny.cc/di1xrw (using tiny to monitor clicks)

I have both the workaround ("Settings" button) and the current example of the not-animating-and-jumping-to-end ("Color Switch" button) in application.

You can see how the text-color is a smooth transition (body tag is not descendant of the class) but the descendant elements' background-color properties merely flash complete once the other animations have finished (without applicable animations it is an instantaneous switch).

Changed February 03, 2013 07:08PM UTC by scottgonzalez comment:2

component: ui.coreui.effects.core
summary: using switchClass does not animate descendantsswitchClass should animate descendants
type: bugfeature

This is already possible: http://jsbin.com/usivec/2/edit

It's a question of whether we should make this the behavior of the class animations. This is likely very inefficient on a real page.

Changed February 03, 2013 07:25PM UTC by scottgonzalez comment:3

resolution: → worksforme
status: newclosed

Actually, this is supported: http://jsbin.com/usivec/3/edit

We just need to document it: https://github.com/jquery/api.jqueryui.com/issues/101