#9226 closed feature (wontfix)

Opened April 12, 2013 01:40PM UTC

Closed April 12, 2013 02:35PM UTC

Last modified April 12, 2013 03:51PM UTC

animated addClass with many children is slow

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

As per this example,

http://jsfiddle.net/gUG4H/2/

When using 

$('div.outer').addClass('myanimatedclass', {
    children: true,
    duration: 1000
});

if div.outer has many children the performance is slow, this appears to because the animateClass method uses the "any element" selector "*". Could this either only select children affected by the adding of the class, or, allow a selector to be passed in to select the children?

e.g.

$('div.outer').addClass('myanimatedclass', {
    children: true,
    childSelector: 'div.inner',
    duration: 1000
});
Attachments (0)
Change History (8)

Changed April 12, 2013 01:56PM UTC by BenEllis comment:1

I've changed

allAnimations = o.children ? animated.find( "*" ).addBack() : animated;

to

allAnimations = o.children ? animated.find(o.childSelector ? o.childSelector : "*").addBack() : animated;

in my working copy for now.

Changed April 12, 2013 02:00PM UTC by scottgonzalez comment:2

owner: → BenEllis
status: new → pending

We already calculate the style differences, so only the elements that need to animate will animate. Adding a selector for the descendants doesn't seem like a good idea. It will surely lead to confusing "errors" when new descendants are expected to be animated.

Can you create an example showing a sane use case where this is a concern? Accepting a selector really just seams like a trap for your future self.

Changed April 12, 2013 02:19PM UTC by BenEllis comment:3

status: pending → new

http://jsfiddle.net/BenEllis/4Gwe9/

1000 elements, freezes my browser for a couple of seconds before starting the animation.

in this case, I could just use children: false but if I want just one of those child elements to animate as well then it would be very slow.

Changed April 12, 2013 02:20PM UTC by BenEllis comment:4

In my working copy with the change I mentioned, there is no freeze before the animation starts.

Changed April 12, 2013 02:21PM UTC by BenEllis comment:5

I admit my change is a bad design.

It would be better if all the CSS rules that apply to the class could be collected and used to create a selector of the children.

Changed April 12, 2013 02:35PM UTC by scottgonzalez comment:6

resolution: → wontfix
status: new → closed

Replying to [comment:3 BenEllis]:

http://jsfiddle.net/BenEllis/4Gwe9/ 1000 elements, freezes my browser for a couple of seconds before starting the animation. in this case, I could just use children: false but if I want just one of those child elements to animate as well then it would be very slow.

Sounds like you don't have a use case to present.

Changed April 12, 2013 03:11PM UTC by BenEllis comment:7

The sample was displaying the pause before the animation starts,

My use case is I'm displaying a conversation history (100s - 1000s of lines) and the user wants the ability to minimize, restore and maximize the view. Other controls inside the container change size.

Below is a contrived example of what I'm trying to achieve,

http://jsfiddle.net/BenEllis/4Gwe9/3/

Changed April 12, 2013 03:51PM UTC by scottgonzalez comment:8

#9227 is a duplicate of this ticket.