Làm cách nào tôi có thể làm cho `Reac-beautiful-dnd` không kích hoạt hoạt hình` Reac-trans-group`?

Video chứng minh vấn đề của tôi: https://i.imgur.com/L3laZLc.mp4

Tôi có một ứng dụng đơn giản nơi bạn có thể thêm Thẻ vào 2 Hàng khác nhau. Khi một thẻ được thêm vào một hàng, tôi đang sử dụng react-transition-groupđể kích hoạt hoạt hình "nhập".

Tuy nhiên, tôi cũng đã react-beautiful-dndcài đặt để cho phép kéo Thẻ giữa các Hàng và cũng để tự sắp xếp lại các Hàng. Nhưng khi Thẻ được chuyển sang Hàng mới hoặc khi Hàng được sắp xếp lại, một số thẻ có lửa hoạt hình "nhập", trông rất kỳ lạ và không nên xảy ra.

Khi kéo, hình động không mong muốn sẽ kích hoạt khi

1. Thẻ được kéo đến một hàng khác.

2. Một hàng được sắp xếp lại và 2 Hàng có số lượng Thẻ khác nhau.

Điều kỳ lạ là những hình ảnh động không mong muốn sẽ không xảy ra khi

1. Thẻ được kéo đến một vị trí mới trong Hàng ban đầu của nó.
2. Các hàng được sắp xếp lại và các hàng có cùng số lượng Thẻ.

Tôi muốn biết làm thế nào tôi có thể có nó để các react-transition-grouphình ảnh động sẽ không kích hoạt khi stateđược sửa đổi bằng cách sử dụng react-beautiful-dnd.

Hộp cát của vấn đề của tôi (Thông tin thêm trong các nhận xét trong App.jstệp):

https://codesandbox.io/s/get-beautiful-drag-to-not-trigger-transition-group-tc40w?fontsize=14&hidenavigation=1&theme=dark

Tôi đã sửa đổi giải pháp của RaviNila để loại bỏ nháy mắt liên kết khi bạn kéo giữa các hàng, bằng cách giới thiệu bộ sưu tập các kiểu bổ sung. Nháy mắt đó là do tài sản css này gây ra:

transition: all 200ms ease-out;

Khi mục được hiển thị như một phần của Transitiongroup mặc dù nó được đặt thành thời gian chờ 0 và "" là một lớp, quá trình chuyển đổi vẫn diễn ra, có thể xảy ra vì newCardItem đã thay đổi trong setTimeout. Nhưng loại bỏ setTimeout hoàn toàn giết chết hình ảnh động. Vì vậy, việc lặp lại các kiểu mà không có thuộc tính chuyển đổi đó sẽ khắc phục hoàn toàn vấn đề của bạn, afaics.

https://codesandbox.io/s/get-beautitable-drag-to-not-trigger-transition-group-share-bpc43

Trong App.jsbạn đã đề cập các bình luận sau đây là yêu cầu của bạn:

Những gì tôi muốn:

1. Tôi muốn các react-transition-grouphình ảnh động chỉ kích hoạt khi trạng thái mới được thêm vào

2. và không phải khi trạng thái được sửa đổi bằng cách kéo và thả (với onDragEndchức năng);

Vấn đề này có thể được khắc phục chỉ bằng cách giới thiệu một lá cờ mới hasNewCard. Cờ này sẽ truechỉ khi một thẻ mới được tạo, không phải khi trạng thái được sửa đổi bởi onDragEnd.

Vì vậy, ở đây react-transition-grouphoạt hình chỉ nên bắn khi hasNewCardcó true.

Phiên bản CodeSandbox:

https://codesandbox.io/s/get-beautitable-drag-to-not-trigger-transition-group-share-o25ej