Gridstack.js: Gridstack Animation (transisi atas) tidak berfungsi dengan jQuery versi 3.3.x

Dibuat pada 9 Mei 2018  ·  15Komentar  ·  Sumber: gridstack/gridstack.js

Subjek masalah

Ketika jQuery versi 3.3.x digunakan, animasi tidak berfungsi - Sepertinya transisi ke kiri terjadi tetapi transisi atas tidak.
Catatan: Bekerja dengan baik dengan versi jQuery hingga 3.2.1

Lingkungan Anda

  • versi gridstack.js - 0.3.0
  • jQuery versi - 3.3.1

Langkah-langkah untuk mereproduksi

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

Perilaku yang diharapkan

Animasi seharusnya bekerja secara normal dengan efek transisi "transisi: kiri .3s, atas .3s, tinggi .3s, lebar .3s;"

Perilaku sebenarnya

Tidak ada transisi yang terjadi yang tampaknya tidak menyenangkan.

bug

Komentar yang paling membantu

Saya menemukan jawabannya. Masalahnya ada di CSS. Anda perlu menyetel nilai atas dan kiri default untuk semua div .grid-stack-item agar transisi CSS berfungsi dengan benar. Jadi tambahkan saja ini di CSS Anda:

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

Semua 15 komentar

Saya baru saja membaca changelog jQuery dan sepertinya tidak ada yang berdampak pada gridstack. Saya akan memperbarui jQuery saya, mengujinya, dan semoga mendapatkan sesuatu untuk Anda.

Saya baru saja bertemu dengan kasus bahwa animasi gridstack berfungsi dengan baik ketika diinisialisasi untuk kedua kalinya. Saya menggunakan gridstack di dalam komponen ember.

1) Ketika saya beralih ke rute lain - komponen ember dihancurkan tetapi objek data gridstack masih hidup
yaitu ($ ('. grid-stack'). data ()).
2) Jika saya kembali lagi ke rute yang sama, komponen diinisialisasi lagi dan animasi gridstack
bekerja dengan baik kalau begitu.
3) Jika saya menghancurkan objek data grid bersama dengan komponen ember saya saat beralih ke rute berikutnya
($ ('. grid-stack'). data ('gridstack'). destroy ()) bahkan ketika saya kembali ke animasi rute yang sama
tidak bekerja.

Saya tidak tahu akar penyebabnya. Saya hanya berbagi perilaku yang saya alami.

@radiolips Ada pembaruan tentang ini?

Saya telah memverifikasi itu, bahkan dengan jquery 3.3.x, dan dengan gridstack 0.4.0, contoh Anda tidak menampilkan animasi untuk menyeret widget. Saya mengujinya pada contoh pribadi, dan berhasil. Saya tidak tahu mengapa itu terjadi. Saya sibuk dengan 0.4.0 dan 1.0.0 (yang saya harap segera tersedia dalam versi beta), tetapi saya akan mencoba meluangkan lebih banyak waktu di pagi hari untuk menyelidiki masalah Anda.

1.0.0 (yang saya harap segera tersedia dalam versi beta)

Senang mendengar @radiolips . Di luar kerangka kerja lain, saya menemukan gridstack mudah dan efisien tetapi saya terjebak dengan masalah aneh ini. Saya akan senang jika Anda segera memperbaikinya. Terima kasih.

@ 1995navinkumar Saya tidak ingin meninggalkan Anda dalam kegelapan - Saya akan membutuhkan lebih banyak waktu untuk menyelidiki masalah Anda.

Ada pembaruan tentang ini? @radiolips

Saya telah dibanjiri dengan pekerjaan gridstack, jadi saya belum memiliki kesempatan untuk melihat lebih jauh masalah Anda. Saya minta maaf karena tidak menyediakan waktu untuk Anda. Saya masih mengerjakannya dan akan mendapatkan pembaruan secepat saya bisa - maaf sudah lama sekali.

Luangkan waktu Anda @radiolips. Jangan khawatir 👍

Hai, Saya memiliki masalah yang sama setelah memutakhirkan dari 0.2.6 ke 0.3.0 dalam proyek saya.

Setelah menelusuri kode, saya menemukan

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

baris ini dapat menyebabkan masalah ini.

Ketika saya mengomentari baris ini, css transisi bekerja seperti yang diharapkan.

Mencoba hal yang sama, transisi berfungsi dengan baik sekarang. @bistin @radiolips

Saya masih menggunakan jquery 2.1.3 dan animasi tidak berfungsi. Saya melihat radiolips akan memperbaiki ini untuk versi terbaru jquery jadi saya akan menunggu pembaruannya sebelum memutakhirkan jquery ke yang terbaru. Terimakasih semuanya! Pertahankan kerja bagus Radiolips. Ini adalah plugin yang bagus dan kami menghargai komitmen Anda. Saya sedih melihat gridster tidak lagi diperbarui tetapi sangat senang kalian mengambil tempat yang ditinggalkannya.

Saya menemukan jawabannya. Masalahnya ada di CSS. Anda perlu menyetel nilai atas dan kiri default untuk semua div .grid-stack-item agar transisi CSS berfungsi dengan benar. Jadi tambahkan saja ini di CSS Anda:

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

@ 1995navinkumar Saya pikir saya akan gila. Saya kembali ke contoh Anda, dan animasi tampaknya baik-baik saja sekarang?

Menutup karena ada perbaikan baru di cabang develop yang saya yakini dapat menyelesaikan masalah. Harap buka kembali tiket jika Anda masih mengalami masalah. Ini akan dikirimkan pada rilis berikutnya, kemungkinan besar akhir minggu ini.

Apakah halaman ini membantu?
0 / 5 - 0 peringkat