Bug Tracker

Ticket #8685 (closed enhancement: fixed)

Opened 3 years ago

Last modified 22 months ago

Animations should keep track of animation state in order to properly address stacked animations

Reported by: ajpiano Owned by: gnarf
Priority: blocker Milestone: 1.8.3
Component: effects Version: 1.5.1
Keywords: 1.7-discuss Cc:
Blocking: Blocked by:

Description (last modified by timmywil) (diff)

None of the various combinations of utilising .stop() gracefully handle many quick animation triggers in a desirable way:

 http://jsfiddle.net/ajpiano/gqZL5/10/  http://jsfiddle.net/rpflorence/gqZL5/

In MooTools, this is handled in a much more intuitive way, because it tracks the animation state internally.

 http://jsfiddle.net/rpflorence/gqZL5/1/

We should support this common usecase more gracefully

Change History

comment:1 Changed 3 years ago by ajpiano

  • Owner set to john
  • Priority changed from undecided to high
  • Status changed from new to assigned
  • Component changed from unfiled to effects
  • Milestone changed from 1.next to 1.7

comment:2 Changed 3 years ago by ajpiano

See also 2408

Version 0, edited 3 years ago by ajpiano (next)

comment:3 Changed 3 years ago by timmywil

#8830 is a duplicate of this ticket.

comment:4 Changed 3 years ago by john

#2408 is a duplicate of this ticket.

comment:5 Changed 3 years ago by john

  • Owner john deleted
  • Milestone changed from 1.7 to 1.next

Let's get this on the roadmap for 1.7.

comment:6 Changed 3 years ago by john

  • Keywords 1.7-discuss added

Nominating ticket for 1.7 discussion.

comment:7 Changed 3 years ago by jaubourg

  • Description modified (diff)

+1,

comment:8 Changed 3 years ago by timmywil

+1, +1 +1 +1 +1 +1

comment:9 Changed 3 years ago by dmethvin

  • Description modified (diff)

+1, Is someone volunteering?

comment:10 Changed 3 years ago by timmywil

  • Owner set to timmywil

comment:12 Changed 3 years ago by timmywil

  • Milestone changed from 1.next to 1.7

comment:13 Changed 3 years ago by john

  • Description modified (diff)

+1, Sounds cool - let's go for it!

comment:14 Changed 3 years ago by scott.gonzalez

+1, this is really interesting, but I assume it only works when using the same animation for both directions?

comment:15 Changed 3 years ago by rpflorence

MooTools has a "link" option when animations are stacked. There's "ignore", "cancel", and "chain".

Ignore - ignores any calls while animating Cancel - Cancels the current animation, starts the next one from the current state (what you're seeing in the original fiddle I created for ajpiano) Chain - Stack the next effect. The default jQuery behavior (rarely what you want).

This option is obviously really helpful. I've been working on porting the MooTools Fx constructor to power the jQuery effects mostly for this option (and I find them a little smoother in some browsers).

comment:16 Changed 3 years ago by rpflorence

@timmywil - I'm not entirely familiar with the underlying jQuery.fx, but wouldn't it be better to do the state tracking there so it just works™ with all animations? (rather than changing a lot of code in the shortcuts like show and slideToggle)

Regardless, VERY happy to see this progress on your 1.7 branch. I'm using jQuery for most of my work these days and battling this has ladened my transition to jQuery with frustration :)

Last edited 3 years ago by rpflorence (previous) (diff)

comment:17 Changed 3 years ago by timmywil

  • Description modified (diff)

@rpflorence: jQuery fx has a different structure than Mootools, a structure I don't think we want to change. The options mentioned can be replicated in different ways in jQuery. Ignore might be similar to setting queue to false, chain as you said is the behavior of the jQuery queue (which has its own advantages I think), and cancel...well that wasn't really an option before unless you created your own animation that kept track of state. Finally, I think you're confused about what I've written. The code I've added and updated will work for all animations. The show function you see updated is not jQuery.fn.show, it's the show on the jQuery.fx prototype. Any property set to "show" or "toggle" will use this function and that is what we're talking about. Animations set to actual values are unaffected because we don't have to do any calculations for the user. Like I said before, you could already do before what is done in MooTools with a custom jQuery animation that sets values and keeps track of its own state. This will add that state tracking so that actual values do not need to be passed. I think what you're asking for in your last comment is really what I've already done. Anyway, I agree. This is something I've wanted jQuery to do since I first started using it as well.

comment:18 Changed 3 years ago by ajpiano

+1, Obvs - also it seems like timmy's solution seems to cover the intended problem in the right spot...

comment:19 Changed 3 years ago by timmywil

#10015 is a duplicate of this ticket.

comment:20 Changed 3 years ago by timmywil

  • Status changed from assigned to closed
  • Resolution set to fixed

Animation state is tracked on toggled/stopped animations using the private data cache. Fixes #8685. See full commit message for more. Fixes #6641.

  • Check the completed timer has not been removed already so other timers do not get accidentally removed. Fixes #6641.

comment:9 Changed 3 years ago by dmethvin

#10263 is a duplicate of this ticket.

comment:10 Changed 22 months ago by gnarf

  • Priority changed from high to blocker
  • Status changed from closed to reopened
  • Resolution fixed deleted
  • Milestone changed from 1.7 to 1.8.3

We had a regression on this in 1.8.0 - I'm going to make sure to cover this in the units.

 http://jsfiddle.net/cz4XM/1/

comment:11 Changed 22 months ago by david71rj

Seems that @timmywil fix works fine with @gnarf fiddle here. And it solve a big problem, really.

comment:12 Changed 22 months ago by timmywil

  • Owner changed from timmywil to gnarf
  • Status changed from reopened to assigned

comment:25 Changed 22 months ago by Corey Frang

  • Status changed from assigned to closed
  • Resolution set to fixed

Keep track of a hiding state for toggle based animations - Fixes #8685

Closes gh-1018

Changeset: c45f6095f2d58a9fefd6bc788e50140acc7cf0c4

comment:26 Changed 22 months ago by Corey Frang

Keep track of a hiding state for toggle based animations - Fixes #8685

Closes gh-1018 (cherry picked from commit c45f6095f2d58a9fefd6bc788e50140acc7cf0c4)

Conflicts:

src/effects.js

Changeset: bee4d0307216292bb0e69b7431d054cf86bdfc43

Note: See TracTickets for help on using tickets.