Pseudoelementos en la API de animaciones web

 

 

 

Para utilizar la API de animaciones web (por ejemplo el.animate()), necesita una referencia a un elemento DOM al que apuntar. Entonces, ¿cómo se usa en pseudoelementos, que en realidad no ofrecen una referencia directa? Dan Wilson cubre una parte (¿nueva?) de la propia API:

const logo = document.getElementById('logo');logo.animate({ opacity: [0, 1] }, { duration: 100, pseudoElement: '::after'}); 

Note en el artículo de Dan que ::markeres compatible. Estuve jugando con eso recientemente mientras hacía nuestra página de Recetas de estilo de lista. Pensé en darle una vuelta probando WAAPI y @keyframesen un elemento ::markery ::after:

 

Al principio, me confundí porque parecía que WAAPI no funcionaba ::after, pero me acordé de que cuando lo uso transform, el elemento no puede ser display: inline. En cambio, lo hice inline-blocky funcionó bien. Sin embargo, descubre que eso @keyframesno parece funcionar en ::markerelementos de Firefox; Espero que lo solucionen (y obtengamos soporte para Chrome y Safari ::markerlo antes posible).

Enlace directo →






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. La innovación no puede mantener la Web rápida
  2. Rendimiento web ultrarrápido
  3. Tabla de contenidos fijos con estados activos de desplazamiento
  4. “cambiar tamaño: ninguno;” en áreas de texto es una mala experiencia de usuario

Pseudoelementos en la API de animaciones web

Pseudoelementos en la API de animaciones web

Para utilizar la API de animaciones web (por ejemplo el.animate()), necesita una referencia a un elemento DOM al que apuntar. Entonces, ¿cómo se usa en pseud

programar

es

https://pseint.es/static/images/programar-pseudoelementos-en-la-api-de-animaciones-web-1471-0.jpg

2024-06-13

 

Pseudoelementos en la API de animaciones web
Pseudoelementos en la API de animaciones web

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences