Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#9226 closed feature (wontfix)

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
});

Change History (8)

comment:1 Changed 6 years ago by BenEllis

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.

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

Owner: set to BenEllis
Status: newpending

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.

comment:3 Changed 6 years ago by BenEllis

Status: pendingnew

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.

comment:4 Changed 6 years ago by BenEllis

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

comment:5 Changed 6 years ago by BenEllis

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.

comment:6 in reply to:  3 Changed 6 years ago by Scott González

Resolution: wontfix
Status: newclosed

Replying to 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.

comment:7 Changed 6 years ago by BenEllis

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/

comment:8 Changed 6 years ago by Scott González

#9227 is a duplicate of this ticket.

Note: See TracTickets for help on using tickets.