KeyframeEffect : la propriété pseudoElement
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since septembre 2020.
La propriété pseudoElement
de l'interface KeyframeEffect
est une chaîne de caractères représentant le pseudo-élément animé. Elle peut valoir null
pour les animations qui ne ciblent pas de pseudo-élément. Elle agit comme accesseur et mutateur, sauf pour les animations et transitions générées par CSS.
Note :
Si elle est définie avec la syntaxe héritée à un seul deux-points (:
) de :before
, :after
, :first-letter
, ou :first-line
, la chaîne de caractères est transformée en sa version moderne à double deux-points (::before
, ::after
, ::first-letter
et ::first-line
respectivement).
Valeur
Une chaîne de caractères ou null
.
Exceptions
SyntaxError
DOMException
-
Erreur levée lors d'une tentative de définir cette propriété sur un élément, ou sur un pseudo-élément invalide (inexistant ou mal orthographié). La propriété reste alors inchangée.
Exemples
<div id="monTexte">Du texte</div>
<pre id="journal"></pre>
#monTexte::after {
content: "👹";
display: inline-block; /* Nécessaire car la propriété `transform` ne
s'applique pas aux éléments inline */
font-size: 2rem;
}
#monTexte::before {
content: "🤠";
display: inline-block;
font-size: 2rem;
}
const journal = document.getElementById("journal");
const monTexte = document.getElementById("monTexte");
// Crée l'animation
const animation = monTexte.animate([{ transform: "rotate(360deg)" }], {
duration: 3000,
iterations: Infinity,
pseudoElement: "::after",
});
// Lit la valeur de KeyframeEffect.pseudoElement
function logPseudoElement() {
const keyframeEffect = animation.effect;
journal.textContent = `Valeur du pseudoElement animé : ${keyframeEffect.pseudoElement}`;
requestAnimationFrame(logPseudoElement);
}
// Toutes les 6 secondes, bascule le pseudo-élément animé actif
function switchPseudoElement() {
const keyframeEffect = animation.effect;
keyframeEffect.pseudoElement =
keyframeEffect.pseudoElement === "::after" ? "::before" : "::after";
setTimeout(switchPseudoElement, 6000);
}
switchPseudoElement();
logPseudoElement();
Spécifications
Specification |
---|
Web Animations> # dom-keyframeeffect-pseudoelement> |
Compatibilité des navigateurs
Loading…
Voir aussi
- L'API Web Animations
- L'interface
KeyframeEffect
- Le constructeur
KeyframeEffect()
- La propriété
target