Opened 10 years ago

Closed 10 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:


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 element I use

This would leave much cleaner code if it were possible!

Change History (3)

comment:1 Changed 10 years ago by xskater

I have made this example available through jsbin @ (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 10 years ago by xskater (previous) (diff)

comment:2 Changed 10 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:

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 10 years ago by Scott González

Resolution: worksforme
Status: newclosed

Actually, this is supported:

We just need to document it:

Note: See TracTickets for help on using tickets.