julianshapiro / velocity

Accelerated JavaScript animation.
VelocityJS.org
MIT License
17.29k stars 1.56k forks source link

Bug: Cannot re-set "display: block" on an element set #73

Closed cblakkan closed 10 years ago

cblakkan commented 10 years ago

After animating multiple elements and setting their display value to "none". When you try and set their display value back to "block" only the first element gets updated.

<div class="box"></div>
<div class="box"></div>
<script>
   $(".box").velocity({"opacity": 0}, {display: "none"});
   $(".box").velocity({"opacity": 1}, {display: "block"}); // Only updates the display property of the first div.box
</script>

Here is a JS fiddle as an example, hope this helps: http://jsfiddle.net/E2WU7/

julianshapiro commented 10 years ago

Thank you kindly, Cordell.

This is a top priority and will be fixed today.

cblakkan commented 10 years ago

Haha, yeah I was pretty shocked how quick the response was :)

I’m not sure if this is a bug with Velocity, or if it’s just Safari. Running the following fiddle on my laptop the circles animate both scale and opacity as intended. When running in any version of Safari (mobile or desktop) only one of the two defined properties animate.

http://jsfiddle.net/2QNYz/

Cordell ʕ•̫͡•ʔ

On Sunday, May 18, 2014 at 3:40 PM, Julian Shapiro wrote:

The second you posted this, I thought to myself, "Oh right. Of course that bug will happen." Just to contextualize my insanely fast response time. Hehe.

— Reply to this email directly or view it on GitHub (https://github.com/julianshapiro/velocity/issues/73#issuecomment-43455869).

julianshapiro commented 10 years ago

/me digs up an email he recently sent to someone:

As per the standard behavior of CSS, Velocity naturally supports 2D transforms and opacity animation for SVG elements -- but, nothing beyond that.

An example fiddle for you: http://jsfiddle.net/Q6ugj/5/. Here, Velocity is animating the translateX, translateY, and opacity of the SVG dots. (All other transform properties are supported as well, including scale, rotate, etc.)

However, it appears that Safari doesn't even let you animate transform properties. You're stuck with just opacity.

I'll look further into SVG support tonight and tomorrow.

As for your first bug report, it has been fixed and will be pushed soon.

Thank you so much. You are awesome.

cblakkan commented 10 years ago

Sweet, thanks.

julianshapiro commented 10 years ago

Thanks again, Cordell. Please confirm that your first issue is fixed.

Re. SVG: It's on my to-do list to look into supporting this.

cblakkan commented 10 years ago

Confirmed this is fixed, thanks =D

julianshapiro commented 10 years ago

23andMe is pretty rad. If you wind up using Velocity on there, lemme know and I'll plug you and your work. Enjoy the rest of the weekend!