Tengo un contenedor de notificaciones que tiene una posición fija a la derecha de la pantalla, pero no tiene un tamaño predeterminado. Cada vez que se procesa una notificación, llenará el contenedor, dándole ancho y alto, y las notificaciones aparecerán una tras otra en una columna. Elegí usar flex, pero se puede lograr lo mismo sin flex y, en su lugar, darle a cada niño un margen inferior para el espacio.

 .notifications { position: fixed; top: 5rem; right: 1rem; width: auto; height: auto; gap: 0.5rem; display: flex; flex-direction: column; }

La notificación en sí tiene muchas partes y la implementación no es realmente relevante, por lo que para simplificar, cada notificación tiene animaciones básicas de deslizamiento hacia adentro y hacia afuera:

 .favorites-notification { // other styles transform: translateX(200%); opacity: 0; animation: slideIn 0.375s ease-out forwards, slideOut 0.375s ease-out 2.625s forwards; } @keyframes slideIn { 100% { transform: translateX(0%); opacity: 1; } } @keyframes slideOut { 100% { transform: translateY(-100%); opacity: 0; } }

Esto se ve bastante bien cuando solo se muestra una notificación en la pantalla. Sin embargo, cuando hay varias notificaciones, en una lista de arriba a abajo, las notificaciones restantes se colocarán en el espacio vacío que dejó la notificación desmontada. La vida útil de cada notificación se establece en 3 segundos con un setTimeout en useEffect on mount. ¿Cómo hago para que los elementos restantes se deslicen hacia arriba para ocupar la posición dejada por la notificación desmontada, en lugar de simplemente encajar en su lugar cuando la notificación se desmonta? Quiero que las otras notificaciones se deslicen hacia arriba al mismo tiempo que la más alta se desliza hacia arriba y hacia afuera para que se vea suave.

Intenté colapsar la altura de la notificación para eliminarla en la animación deslizante, pero no logra el resultado deseado y es muy poco fluido. Tampoco quiero afectar la altura de la notificación que se desliza porque permanece un poco en la pantalla, y ese no es el efecto que busco. Sé que traducir no afecta el flujo de documentos, por lo que el DOM todavía piensa que el elemento está donde estaba originalmente hasta que se desmonta.

Toda ayuda es apreciada. Si mi pregunta/explicación no está clara, indíquelo y lo revisaré.

Editar: el uso de la propiedad superior tampoco parecía funcionar. Establecer un margen superior negativo es mejor, pero comienza sin problemas y aún se rompe al final. Para que el margen negativo funcione sin problemas, debo saber el tamaño exacto de la notificación, y eso varía.