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 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 |
Changed February 03, 2013 07:08PM UTC by comment:2
| component: | ui.core → ui.effects.core |
|---|---|
| summary: | using switchClass does not animate descendants → switchClass should animate descendants |
| type: | bug → feature |
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 comment:3
| resolution: | → worksforme |
|---|---|
| status: | new → closed |
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
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).