CSS Animation verweigert Dienst! – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self CSS Animation verweigert Dienst! Sun, 10 May 20 18:00:25 Z https://forum.selfhtml.org/self/2020/may/10/css-animation-verweigert-dienst/1770352#m1770352 https://forum.selfhtml.org/self/2020/may/10/css-animation-verweigert-dienst/1770352#m1770352 <p>Hallo, ich habe eine Frage: Ich habe eine Animation, die sich rekursiv immer wieder selbst aufrufen soll, wenn eine gewisse Bedingung gegeben ist. Das passiert aber nicht - wieso?</p> <p>CSS:</p> <pre><code class="block language-css"> <span class="token selector">.Animationsklasse</span> <span class="token punctuation">{</span> <span class="token property">animation-name</span><span class="token punctuation">:</span> AnimationsklasseKeys<span class="token punctuation">;</span> <span class="token property">animation-duration</span><span class="token punctuation">:</span> 1s<span class="token punctuation">;</span> <span class="token property">animation-fill-mode</span><span class="token punctuation">:</span> forwards<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@keyframes</span> AnimationsklasseKeys</span> <span class="token punctuation">{</span> <span class="token selector">0%</span> <span class="token punctuation">{</span><span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">50%</span> <span class="token punctuation">{</span><span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>1<span class="token punctuation">,</span> 1<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">100%</span> <span class="token punctuation">{</span><span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p>Javascript:</p> <pre><code class="block language-javascript"><span class="token comment">/* CODE */</span> <span class="token keyword">let</span> Bedingung <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span> <span class="token keyword">let</span> <span class="token function-variable function">Animieren</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">let</span> MeldungenParagraph <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"Meldungen"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">let</span> <span class="token function-variable function">nach_Animation</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> MeldungenParagraph<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span><span class="token string">'animationend'</span><span class="token punctuation">,</span> nach_Animation<span class="token punctuation">)</span><span class="token punctuation">;</span> MeldungenParagraph<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">"Animationsklasse"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/* CODE */</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>Bedingung<span class="token punctuation">)</span> <span class="token function">Animieren</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Wieso wird Animieren hier nicht mehr aufgerufen?</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> MeldungenParagraph<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'animationend'</span><span class="token punctuation">,</span> nach_Animation<span class="token punctuation">)</span><span class="token punctuation">;</span> MeldungenParagraph<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">"Animationsklasse"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token function">Animieren</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Dank euch herzlichst!</p> CSS Animation verweigert Dienst! Sun, 10 May 20 19:56:15 Z https://forum.selfhtml.org/self/2020/may/10/css-animation-verweigert-dienst/1770357#m1770357 https://forum.selfhtml.org/self/2020/may/10/css-animation-verweigert-dienst/1770357#m1770357 <p>Lieber Meister,</p> <blockquote> <p>MeldungenParagraph.removeEventListener('animationend', nach_Animation);</p> </blockquote> <p>wo ist das Event <code>animationend</code> definiert? Die Schreibweise ist falsches Englisch, also muss es entweder ein von Dir definiertes <code>CustomEvent</code> sein, oder Du hast schlicht <code>animated</code> falsch geschrieben.</p> <p>Liebe Grüße</p> <p>Felix Riesterer</p> CSS Animation verweigert Dienst! Sun, 10 May 20 22:11:01 Z https://forum.selfhtml.org/self/2020/may/10/css-animation-verweigert-dienst/1770364#m1770364 https://forum.selfhtml.org/self/2020/may/10/css-animation-verweigert-dienst/1770364#m1770364 <p>Hallo Meister,</p> <blockquote> <p>Javascript 101</p> </blockquote> <p>Eher 302. Animation-Events sind schon etwas fortgeschrittener.</p> <p>Aber beschäftigen wir uns mal mit „JavaScript im Browser“ 101 und dem Debugging-Propädeutikum.</p> <p>Die Funktion <strong>wird</strong> mehrfach aufgerufen, aber das Entfernen und Wiederherstellen der Klasse wird nicht erkannt. Beweis: Baue einfach console.log Anweisungen ein.</p> <p>Aber warum wird das classList.remove/add nicht erkannt? Es geschieht zu schnell hintereinander, im selben Step der Eventloop, es ist keine Layout-Phase dazwischen. Die Rendering-Engine des Browsers bekommt gar nicht mit, dass die Klasse mal kurz weg war.</p> <p>Welche Lösung Dir hilft, hängt auch davon ab, ob Du die Bedingung schon vor Animationsbeginn kennst. Weißt Du, wie oft Du blinken willst? Dann kann Dir animation-iteration-count helfen.</p> <p>Wenn nicht, wenn Du nach jedem Animationsschritt neu prüfen musst, dann mach es so:</p> <pre><code class="block language-js"><span class="token keyword">if</span> <span class="token punctuation">(</span>Bedingung<span class="token punctuation">)</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span>Animieren<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Das verlegt den Animieren-Aufruf in den nächsten Step der Eventloop. Damit kommt ein Layoutschritt dazwischen und der Browser registriert das Verschwinnden und Wiedererscheinen der Klasse.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> CSS Animation verweigert Dienst! Sun, 10 May 20 20:04:52 Z https://forum.selfhtml.org/self/2020/may/10/css-animation-verweigert-dienst/1770359#m1770359 https://forum.selfhtml.org/self/2020/may/10/css-animation-verweigert-dienst/1770359#m1770359 <p>Hallo Felix, Ich bin ein bißchen verwirrt, wieso soll <code>animationend</code> ein CustomEvent sein? Ist doch <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event" rel="nofollow noopener noreferrer">alles ganz hochoffiziell</a>?</p> CSS Animation verweigert Dienst! Sun, 10 May 20 20:28:21 Z https://forum.selfhtml.org/self/2020/may/10/css-animation-verweigert-dienst/1770361#m1770361 https://forum.selfhtml.org/self/2020/may/10/css-animation-verweigert-dienst/1770361#m1770361 <p>Hallo Felix,</p> <blockquote> <p>wo ist das Event <code>animationend</code> definiert? Die Schreibweise ist falsches Englisch</p> </blockquote> <p>was ist an Animation End falsch? Die Reduktion auf Kleinschreibung und die Eliminierung von Blanks ist ja für Javascript-Events keine Seltenheit.</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Ich stamme aus Ironien, einem Land am sarkastischen Ozean. </div> CSS Animation verweigert Dienst! Sun, 10 May 20 23:31:58 Z https://forum.selfhtml.org/self/2020/may/10/css-animation-verweigert-dienst/1770366#m1770366 https://forum.selfhtml.org/self/2020/may/10/css-animation-verweigert-dienst/1770366#m1770366 <p>Lieber Meister,</p> <p>mein Fehler, Asche auf mein Haupt. Hätte vielleicht vorher noch einmal die offiziellen Events nachlesen sollen. Dachte zuerst es sei animation<em><strong>ed</strong></em> als falsches Partizip Perfekt. Aber es ist eben animation<em><strong>end</strong></em> und damit völlig korrekt.</p> <p>Liebe Grüße</p> <p>Felix Riesterer</p> CSS Animation verweigert Dienst! Sun, 10 May 20 21:14:47 Z https://forum.selfhtml.org/self/2020/may/10/css-animation-verweigert-dienst/1770362#m1770362 https://forum.selfhtml.org/self/2020/may/10/css-animation-verweigert-dienst/1770362#m1770362 <p>Also gut, nachdem jetzt alle Fragen zu <em>Javascript 101</em> abgehandelt wurden, hat vielleicht auch jemand eine Idee zu meiner eigentlichen Frage (nämlich warum <code>Animieren()</code> nach dem ersten Durchgang nicht nochmals aufgerufen wird)?</p>