Gridstack.js: Gridstack Animation(transition top) not working with jQuery versions 3.3.x

[1995navinkumar]

Subject of the issue

When jQuery version 3.3.x is used animation doesn't work - Seems like transition left occurs but transition top doesn't.
Note : Works well with jQuery versions up to 3.2.1

Your environment

• version of gridstack.js - 0.3.0
• jQuery version - 3.3.1

Steps to reproduce

(https://jsfiddle.net/dqyvh6vr/29/)

Expected behaviour

Animation should work normally with the transition effect "transition: left .3s,top .3s,height .3s,width .3s;"

Actual behaviour

No transition occurs which doesn't seem pleasing.

[radiolips]

I just read through the jQuery changelog and nothing sounds like it'd impact gridstack. I'll update my jQuery, test it out, and hopefully get something figured out for you.

[1995navinkumar]

I just met with a case that gridstack animation works fine when it is initialized for the second time. I'm using gridstack inside an ember component.

1) When I switch to another route - ember component gets destroyed but gridstack data object still lives
i.e ($('.grid-stack').data( )).
2) If I come back again to the same route the component is initialized again and gridstack animation
works fine then.
3) If I destroy the grid data object along with my ember component on switching to next route
($('.grid-stack').data('gridstack').destroy( )) then even when I come back to the same route animation
doesn't work.

I don't know the root cause of it. I'm just sharing the behavior I came through.

[1995navinkumar]

@radiolips Any update on this?

[radiolips]

I've verified that, even with jquery 3.3.x, and with gridstack 0.4.0, your example doesn't show animation for dragging the widget. I tested it on a personal example, and it did work. I don't know why that's happening. I've been busy with 0.4.0 and with 1.0.0 (which I hope to be in beta soon), but I'll try to spend some more time in the morning to investigate your issue.

[1995navinkumar]

1.0.0 (which I hope to be in beta soon)

Thats nice to hear @radiolips . Out of other frameworks, I found gridstack to be easy and efficient but I'm stuck with this wierd issue. I'll be happy if you fix this soon. Thank you.

[radiolips]

@1995navinkumar I don't want to leave you in the dark - I'm going to need a little more time to look into your issue.

[1995navinkumar]

Any update on this? @radiolips

[radiolips]

I've been swamped with gridstack work, so I haven't had a chance to look more into your issue. I apologize for not finding the time for you. I'm still working at it and will have an update as quickly as I can - sorry it has taken so long.

[1995navinkumar]

Just take your time @radiolips. No worries 👍

[bistin]

Hi, I have the same problem after upgrading from 0.2.6 to 0.3.0 in my project.

After tracing the code, I found

https://github.com/gridstack/gridstack.js/blob/v0.3.0/src/gridstack.js#L944

this line may cause this problem.

When I comment out this line, the transition css worked as expected.

[1995navinkumar]

Tried the same, transition works fine now. @bistin @radiolips

[eeldivad]

I'm still using jquery 2.1.3 and animation isn't working. I see radiolips will be fixing this for the latest version of jquery so I'll wait for his update before upgrading jquery to latest. Thanks everyone! Keep up the good work Radiolips. This is a great plugin and we appreciate your commitment. I was sad to see gridster no longer updated but was so happy you guys picked up where it left off.

[carnilino]

I figured it out. Problem was in the CSS. You need to set default top and left values for all divs .grid-stack-item for the CSS transition to work properly. So just add this in your CSS:

.grid-stack-item { top: 0; left: 0; }

[radiolips]

@1995navinkumar I think I'm going crazy. I went back into your example, and animation seems fine now?

[radiolips]

Closing because there's a new fix in the develop branch that I believe resolves the issue. Please reopen a ticket if you still have a problem with it. It will ship in the next release, likely later this week.