Repository navigation
Animate doesn't work #937
Description
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
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.
Activity
JanStorm commentedon Jan 18, 2019
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?
Fix gridstack#937
Merge pull request #1047 from radiolips/bugfix/937
radiolips commentedon Nov 17, 2019
@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 commentedon Nov 26, 2019
had to revert change until correct fix...
marttop commentedon Sep 30, 2020
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 commentedon Sep 30, 2020
@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 commentedon Sep 30, 2020
@adumesny Thanks for your reply! I'll try to fix it then.
marttop commentedon Sep 30, 2020
#1391 @adumesny It seems to work, can you verify that, it's my first pull request sorry if I did something wrong.
Fixed 'animate' issue.
fix to animate
adumesny commentedon Oct 4, 2020
fixed in 2.0.2 upcoming release.
v2: fix to animate