Opened 7 years ago

Closed 7 years ago

#9052 closed feature (worksforme)

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!

Change History (3)

comment:1 Changed 7 years ago by xskater

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).

Last edited 7 years ago by xskater (previous) (diff)

comment:2 Changed 7 years ago by Scott González

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.

comment:3 Changed 7 years ago by Scott González

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

Note: See TracTickets for help on using tickets.