stop() animation #508

Closed
ottonascarella opened this Issue May 7, 2012 · 7 comments

Projects

None yet

7 participants

@ottonascarella

Helle there,

Thanks for the amazing work with Zepto.

I am missing a lot a stop for animation...any thought on that?

Cheers a lot,

Otto

@enure
Contributor
enure commented May 7, 2012

Zepto uses css transitions, and there is no native api method to stop a css transition.

In order to work around this, you can:

  1. get the current webkit transform style properties
  2. remove the animating elements from the page
  3. add them back in with only the transform applied, but not animating

It's not perfect though, the elements will flash when they are removed and then inserted again.

@wolfv
wolfv commented May 7, 2012

Setting the transition time to near infinity should do the trick ... Not?

@arextar
Contributor
arextar commented May 7, 2012

I would also think setting the style to the computed property would work

@enure
Contributor
enure commented May 7, 2012

@arexkun I tested it out and you're correct. You first set "-webkit-transition: none;" and then immediately set the transform value to the computed style. The computed style value comes back as a matrix (http://css-tricks.com/get-value-of-css-rotation-through-javascript/), so you have to parse that first before you can set the transform css.

@wolfv Setting the transition to infinity did not work for me. It continues the animation at the same rate as it was set initially.

@mislav
Collaborator
mislav commented Sep 7, 2012

@enure If you've got working code, you could share with us here.

Not sure if we'll include in Zepto, but could be a plugin or just a snippet that people could use.

@madrobby madrobby was assigned Nov 24, 2013
@madrobby
Owner

Closing this because there was no response to our questions in a while. Feel free to reopen with the requested information!

@madrobby madrobby closed this Jul 12, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment