Animate doesn't work

[ermcgrat]

Animate doesn't work. You can try any* of the demos and add animate: true to them, and animation will not work. It doesn't matter whether you use the configuration object, data-gs-animate, or setAnimation() api.

*Adding animate to the two-grid demo does work. Animate works as long as you have two or more grids on your page, see details below.

Your environment

Gridstack v 1.0.0-dev
Firefox, Chrome, Edge, IE11

Steps to reproduce

I have taken the float demo and simply added animate: true. See here:
https://gridstackdemo.azurewebsites.net/demo/float.html

Note that while rearranging items they are not animated. The grid itself (height, etc) is animated, the item being dragged is animated (when released). Other items pushed out of the way (by dragging a block around) will not be animated.

Expected behaviour

Animation should happen

Actual behaviour

Items snap to position instead of animating.

Additional Information

The animation isn't happening because all of the style information containing "top" and "height" properties gets deleted and recreated constantly. See here (this method is called constantly while dragging a block around):

gridstack.js/dist/gridstack.js

Line 1003 in 7d9ac26

Utils.removeStylesheet(this._stylesId);

Since the animation is based upon CSS transition, it fails to work since the code is simply removing "top", etc. For example, what's essentially happening is a block goes through this:
top: 0px
-top property removed by stylesheet being deleted in javascript
-new stylesheet is created
top: 80px

Of course CSS can't transition between these states. Animation works as long as there are two or more grids because the other grid's stylesheet will still exist, and thus blocks will always have a top property instead of the interim undefined state. I would submit a pull request if I knew how to address this issue, but I'm at a loss why it is done this way.

My hacky workaround for the time being is to create my own stylesheet file with greater specificity so my blocks will always have some sort of top property.

[JanStorm]

I just removed the line 1003 you mentioned in your post. Now the grid is behaving like it should, but i dont know what else is affected by this line. Did somebody the same and has experience with this?

[radiolips]

@ermcgrat @nws-jstorm This is now fixed in the develop branch and will be deployed with the next release. Thanks for letting us know about the bug.

[adumesny]

had to revert change until correct fix...

[marttop]

Is there any update with this issue? "animate: true" still not working for me (V2.0.1).
while rearranging items they are not animated. The grid itself (height, etc) is animated, the item being dragged is animated (when released). Other items pushed out of the way (by dragging a block around) will not be animated, as ermcgrat said.

[adumesny]

@marttop to be honest I have not looked into this issue (or really noticed the lack of animation) but I know the constant create/delete of CSS styles doesn't look right to me and might need an overall. Not a top priority these days... but feel free to contribute a fix or donation to help this project.

[marttop]

@adumesny Thanks for your reply! I'll try to fix it then.