by Anonymous » 10 Apr 2025, 13:59
Hier war was ich erstellt hatte. < /p>
.wrap { color: black;
animation: anim 1.5s linear 0s infinite normal;
animation-play-state: var(--animStat);
}
@keyframes anim {
from { color: red;}
50% { color: yellow;}
to { color: blue;}
}
style="--animStat: running"
onclick="$(this).style['animStat'] = paused">This is a paragraph.
< /code>
Die Idee ist, dass der Status der Animation, sei es läuft oder gestoppt, von einer Variablen abhängt, die im HTML -Code gespeichert und vom CSS -Code verwendet wird. Durch Klicken auf den Absatz ändert das kleine JavaScript Onclick Snippet die Variable, ohne CSS-Klassen oder andere störende Dinge hinzuzufügen. Das JavaScript Onclick -Ereignis funktioniert jedoch nicht. Warum? Liegt es daran, dass das
Ändern der Variablen das Verhalten des CSS -Code nicht dynamisch verändert, oder mein miserabeles Wissen über JavaScript ist erneut geschlagen?
Hier war was ich erstellt hatte. < /p>
.wrap { color: black;
animation: anim 1.5s linear 0s infinite normal;
animation-play-state: var(--animStat);
}
@keyframes anim {
from { color: red;}
50% { color: yellow;}
to { color: blue;}
}
style="--animStat: running"
onclick="$(this).style['animStat'] = paused">This is a paragraph.
< /code>
Die Idee ist, dass der Status der Animation, sei es läuft oder gestoppt, von einer Variablen abhängt, die im HTML -Code gespeichert und vom CSS -Code verwendet wird. Durch Klicken auf den Absatz ändert das kleine JavaScript Onclick Snippet die Variable, ohne CSS-Klassen oder andere störende Dinge hinzuzufügen. Das JavaScript Onclick -Ereignis funktioniert jedoch nicht. Warum? Liegt es daran, dass das [url=viewtopic.php?t=12045]Ändern[/url] der Variablen das Verhalten des CSS -Code nicht dynamisch verändert, oder mein miserabeles Wissen über JavaScript ist erneut geschlagen?
Mobile version