Tengo varios elementos de notificación de diferentes tamaños y los deslizo hacia arriba y hacia afuera después de un temporizador. Necesito saber el tamaño del cuadro de notificación para saber cuánto moverlo, de modo que las otras notificaciones debajo se deslicen sin problemas.

me gustaría hacer algo como

 notificationEl.current.style = `@keyframes slideOut { 100% { margin-top: ${amountToMove}, opacity: 0}}`;

pero no funciona En su lugar, intenté usar Element.animate() dentro de useEffect on mount, pero esto causa un comportamiento extraño de parpadeo.

 setTimeout(() => { notificationEl.current.animate([{ opacity: 0 }, { marginTop: marginTop }], { animationTimingFunction: "ease-out", duration: 375, }); }, 2625);

¿Hay alguna forma más cercana al primer ejemplo en la que pueda asignar una variable al margen superior dentro del fotograma clave? Idealmente, me gustaría hacer esto en useEffect on mount.

Un poco más de explicación:

Hay un contenedor de notificaciones de posición fija a la derecha sin tamaño heredado. Se llena con notificaciones específicas que se deslizan desde la derecha y se organizan en una columna. Cuando el que está arriba se desliza hacia afuera, el que está debajo debe deslizarse hacia adentro para ocupar el espacio dejado por el primero, y esto debería suceder cuando ocurre la animación de deslizamiento para la primera notificación, para que se vea suave. Usando traducir o "arriba" no haga que los de abajo se muevan hacia arriba hasta que el primero se desmonte. Colapsar la altura tampoco es lo que quiero, ya que eso afecta el aspecto de la notificación que está saliendo.

Tengo que hacer que el margen superior en el fotograma clave tenga el tamaño del cliente delimitador rect más un desplazamiento (eso es lo que indica la cantidad para mover) porque los tamaños de las notificaciones pueden variar y varían, por lo que la cantidad para moverlas para hacer la animación aspecto suave también varía.