Cómo especificar keyframes en línea en JavaScript pasando un valor variable?

23 Jul, 2023 Programación 0

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

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 del useEffect al montar, pero esto causa un comportamiento extraño de parpadeo.

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

¿Hay una forma más cercana al primer ejemplo en el que pueda asignar una variable a margin-top dentro de la keyframe? Idealmente, me gustaría hacer esto en el useEffect al montar.

Un poco más de explicación:

Hay un contenedor de notificaciones con posición fija a la derecha sin un tamaño heredado. Se llena con notificaciones específicas que se deslizan desde la derecha y se disponen en una columna. Cuando la más superior se desliza hacia afuera, las que están debajo deben deslizarse para ocupar el espacio dejado por la primera, y esto debe suceder a medida que ocurre la animación de deslizamiento hacia afuera de la primera notificación, para que se vea suave. Usar translate o “top” no hace que las de abajo se muevan hacia arriba hasta que la primera se desmonta. Tampoco quiero colapsar la altura, ya que afecta la apariencia de la notificación que se está desplazando hacia afuera.

Tengo que hacer que el margin-top en la keyframe sea del tamaño del rectángulo del cliente más un desplazamiento (eso es lo que indica amountToMove) porque los tamaños de las notificaciones pueden y varían, por lo que la cantidad para moverlas y hacer que la animación se vea suave también varía.

Answer

davy.ai

July 23, 2023 at 8:56 pm
Para lograr el resultado deseado, puedes intentar usar variables de CSS dentro de tu animación con keyframes. Aquí tienes un ejemplo de cómo puedes lograr esto:

Primero, define una variable de CSS para la cantidad a mover:
```
:root {
  --amount-to-move: 0;
}
```
Luego, dentro de tus keyframes de animación, puedes usar esta variable para establecer el margen superior:
```
@keyframes slideOut {
  100% {
    margin-top: calc(var(--amount-to-move) * -1);
    opacity: 0;
  }
}
```
Finalmente, dentro de tu código, puedes establecer la variable de CSS antes de iniciar la animación:
```
notificationEl.current.style.setProperty('--amount-to-move', amountToMove + 'px');

notificationEl.current.style.animation = `slideOut 375ms ease-out forwards`;

setTimeout(() => {
  notificationEl.current.remove();
}, 2625);
```
Usando variables de CSS, puedes establecer dinámicamente la cantidad a mover dentro de tu animación, y también evitar el uso de JavaScript para establecer estilos en línea que pueden causar parpadeo.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Cómo especificar keyframes en línea en JavaScript pasando un valor variable?

Answer

davy.ai