¿Cómo puedo hacer que `react-beautiful-dnd` no desencadene una animación` react-transition-group`?


8

Video que muestra mi problema: https://i.imgur.com/L3laZLc.mp4

Tengo una aplicación simple donde puedes agregar tarjetas a 2 filas diferentes. Cuando se agrega una tarjeta a una fila, estoy usando react-transition-grouppara activar una animación "enter".

Sin embargo, también lo he react-beautiful-dndinstalado para permitir arrastrar Cartas entre las Filas, y también para reordenar las Filas mismas. Pero cuando una Carta se mueve a una nueva Fila, o cuando se reordenan las Filas, algunas de las cartas tienen su fuego de animación "enter", que se ve muy extraño y no debería estar sucediendo.

Al arrastrar, la animación no deseada se disparará cuando

  1. Una tarjeta se arrastra a una fila diferente.

  2. Se reordena una fila y las 2 filas tienen diferentes números de cartas.

Curiosamente, las animaciones no deseadas no sucederán cuando

  1. Una carta se arrastra a una nueva posición dentro de su fila original.
  2. Las filas se reordenan y las filas tienen el mismo número de cartas.

Me gustaría saber cómo puedo tenerlo para que las react-transition-groupanimaciones no se activen cuando statese modifique usando react-beautiful-dnd.

Sandbox de mi problema (Más información en los comentarios en el App.jsarchivo):

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

Respuestas:


1

Modifiqué la solución de RaviNila para eliminar el parpadeo antes mencionado al arrastrar entre filas, introduciendo una colección adicional de estilos. Ese parpadeo fue causado por esta propiedad css:

transition: all 200ms ease-out;

Cuando el elemento se representaba como parte de TransitionGroup a pesar de que estaba configurado en el tiempo de espera 0 y "" como una clase, la transición todavía sucedía, probablemente porque newCardItem era cambios en setTimeout. Pero eliminar setTimeout mata completamente la animación. Por lo tanto, repetir los estilos sin esa propiedad de transición corrige completamente su problema, afaics.

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


Me complace que su solución resuelva el problema del parpadeo, aunque me pregunto si puede explicar por qué utilizó setImmediate()en la línea 75. setImmediateno es estándar de acuerdo con MDN, y recomiendan no usarlo en producción, lo que mi aplicación completa pretende hacer.
damon

puede cambiarlo a setTimeout, fue algo con lo que he estado experimentando y no es importante para su problema
fxdxpz

¡Gracias por ayudarme a resolver este problema! Te he otorgado la recompensa :)
damon

1

En App.jsusted ha mencionado el siguiente comentario, que es su requisito:


Lo que quiero:

  1. Me gustaría que las react-transition-groupanimaciones se disparen solo cuando se agregue un nuevo estado

  2. y no cuando el estado se modifica arrastrando y soltando (con la onDragEndfunción);


Este problema se puede solucionar simplemente introduciendo una nueva bandera hasNewCard. Esta bandera será truesolo cuando se cree una nueva tarjeta, no cuando el estado sea modificado por onDragEnd.

Así que aquí la react-transition-groupanimación debería dispararse solo cuando hasNewCardsea true.

Versión de CodeSandbox:

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


En su versión hay un parpadeo en la fila desde la que se ha arrastrado el elemento.
fxdxpz

El parpadeo ocurre debido a la variación del tamaño dinámico. Si todos los artículos son del mismo tamaño, probablemente no sucedan.
RaviNila

Sucede si es el mismo elemento en cada fila, arrastrado. Aún más, puede agregar solo un elemento a cualquier fila y arrastrarlo, parpadeará en la fila anterior cada vez
fxdxpz

Desearía poder dividir la recompensa, pero como @PompolutZ pudo solucionar el problema de parpadeo, tuve que dárselo. Realmente aprecio tu ayuda inicial.
damon
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.