btnQuestions war nur ein Hilfsbutton für mich zum Testen. Anscheinend ist es dir nicht gelungen, diesen Testcode auf dein Verhältnisse zu übertragen.
Ich war inzwischen nicht untätig, habe eine Testumgebung aufgebaut und einige Änderungen vorgenommen. Damit läuft der erste Teil der Animation jetzt ganz gut. Hier der geänderte Code:
function addListeners(countofquestions) {
function collectAnswers(callback, newCallback) {
for (let j = 0; j < answerBtns.length; j++) {
document.getElementById(j + 1).addEventListener('click', () => {
const answerNumber = document.getElementById(j + 1).getAttribute('id');
for (let j = 0; j < answerBtns.length; j++) {
document.getElementById(j + 1).style.cssText = 'opacity: .2; transition: opacity 1s linear';
}
document.getElementById(j + 1).style.cssText = 'opacity: 1; background-color: rgb(84, 146, 184)';
countPlayTime.style.cssText = 'opacity: .2; transition: opacity 1s linear';
givenAnswers.push(answerNumber);
callback(givenAnswers);
newCallback(i);
const realTrueNumber = new FormData();
realTrueNumber.append('id', i);
fetch('giveTrueNumbers.php', {
method: 'post',
body: realTrueNumber
}).then(truenumber => {
return truenumber.json();
}).then(truenumber => {
givenTrueNumbers.push(truenumber)
if (truenumber == answerNumber) {
correctAnswers.push('1');
}
});
i++;
pointerEventsOff();
const answerTxt = answerBtns[j].innerHTML;
stopTimer();
stopCTimer();
if (i <= countofquestions) {
// if (i <= 2) {
playpart.style.cssText = 'transform: rotateY(90deg); opacity: .2; transition: transform 1.5s 2s linear, opacity 1.5s 2s linear';
// playpart.addEventListener('transitionstart', function (event) {
// console.log('transitionstart', event);
// });
// playpart.addEventListener('transitionrun', function (event) {
// console.log('transitionrun', event);
// });
// Hier habe ich das addEventListener fuer "transitionend" geloescht
}
});
} // Ende der Schleife für das addEventListener fuer "click" auf eine Antwort
// und hier habe ich das addEventListener fuer "transitionend" wieder eingefuegt:
playpart.addEventListener('transitionend', function (event) {
if (event.target.id == 'playpart') {
console.log('transitionend', event);
const opacity = getComputedStyle(playpart).opacity;
console.log(opacity);
switch (opacity) {
case '0.2':
// Erste Phase beendet, jetzt neue Frage und Antworten lesen
countPlayTime.style.cssText = 'opacity: 1; transition: opacity 1s linear';
playpart.style.cssText = 'transform: rotateY(0); opacity: 1; transition: transform 1.5s linear, opacity 1s .5s linear';
makeQuestion();
resetTimer();
pointerEventsOn();
for (let j = 0; j < answerBtns.length; j++) {
document.getElementById(j + 1).style.cssText = 'opacity: 1; background-color: coral';
}
break;
case '1':
// Zweite Phase beendet, jetzt die nachfolgende Animation starten
break;
}
}
});
} // collectAnswers(callback, newCallback)
function afterGame() {
if (i == countofquestions) {
// if (i == 2) {
next.style.display = 'none';
noMoreQuestions.style.display = 'block';
stopTimer();
stopCTimer();
finalOverlay.style.cssText = 'display: grid';
finalOverlay.style.top = '-' + window.outerHeight + 'px';
setTimeout(function () {
finalOverlay.style.cssText = 'display: grid; top: 0; transition: top 3s ease-in';
},
1000);
}
} // afterGame()
}Ich habe auch heraus gefunden, warum Du ständig Events für die Buttons bekommen hast: Du hast für die Buttons ja auch die Opacity animiert. Für diese feuert auch das "transitionend". Und jetzt kommt das Eventbubbling ins Spiel: Fängt man das Event bei den Buttons nicht ab, bzw. ist dort dafür kein Eventlistener registriert, so steigt es wie eine Blase im Baum auf, erreicht dabei das div#playpart und feuert dort unseren Eventlistener. Lösung indem wir abfragen ob es sich auch um das #playpart handelt:
if (event.target.id == 'playpart') {
Ich mache mir bald ein wenig Vorwürfe, dass ich die Sache mit dem "transitionend" ins Spiel gebracht habe, denn es hat ja erst Mal alles durcheinander gebracht. Aber ich erinnere mich, dass dein Ziel bei dieser Sache ja vor allem das Lernen ist und da kann es nicht schaden, sich weiter mit den Listenern vertraut zu machen.
Also, erstens: Herzlichen Dank!
Zweitens: Du musst Dir natürlich keinerlei Vorwürfe machen, wenn Du hier irgendwas ins Spiel bringst. Ob ich’s verstehe, steht auf einem ganz anderen Blatt. 
Und ja, mein Ziel – nicht vor allem, sondern ausschließlich – ist hier das Lernen. Und jetzt habe ich sogar verstanden, was Bubbling bedeutet.
Die ganze Mühe, die Du Dir machst, und die ganze Zeit, die Du für mich opferst, führen hoffentlich dazu, dass ich immer mehr verstehe. Ohne Deine Hilfe – das schrieb ich schon mal – wäre ich ganz schön verloren gewesen.
Den aktuellen Code, den Du mir jetzt geschickt hast, schaue ich mir ganz in Ruhe an. Und: siehe Zeile 1. 
PS: Das "herausziehen" habe ich noch vergessen zu erkären. Ich habe es im Code von vorhin kommentiert, lade diese Seite neu und sieh es dir an.
Gerade war ich beim Durchschauen des Codes und dachte mir „Ah, hier ist also der Eventlistener jetzt beendet und ein neuer beginnt“, da kam Deine Ergänzung.
Ich glaube, ich habe es verstanden, und zwar so: Der Eventlistener auf den Antwortbuttons sorgt lediglich dafür, dass die erste CSS-Transition für playpart gestartet wird. Der nachfolgende Eventlistener reagiert auf diese Transition und startet, wenn sie beendet ist.
Dann wird die Opacity als „Stütze“ für das Folgende verwendet: Während sie auf 0.2 steht, werden u. a. neue Fragen geladen und die Opacity von playpart wieder auf 1 gesetzt. Und erst, wenn sie bei 1 angekommen ist, können weitere Befehle ausgeführt werden.
Und ich denke, ich muss pointerEventsOn() in case '1' verschieben, denn dort starten auch die Timer neu.
Eine fantastische Lösung. Getestet habe ich sie noch nicht, aber ich gehe davon aus, dass ich meine Timing-Probleme nun los bin. Und ja, ich habe wieder was gelernt, danke!
ZitatDann wird die Opacity als „Stütze“ für das Folgende verwendet
Genau. Erst dachte ich daran, eine Statuskennung als Variable zu führen und diese auf "phase1" und "phase2" o. ä. zu setzen aber dann fiel mir ein, dass der Endwert der Opacity ja schon angibt, in welcher Phase wir uns befinden.
Ja, ist nur ein anderer Weg und hat kein Nachteile. Der Vorteil eines switch kommt erst zum Tragen, wenn man sehr viele Wert abzufragen hat.
Wie man beim Durchklicken meines Quiz sehen kann, variiert durch unterschiedliche Länge der Fragen die Höhe des Elements div class="question backgroundLight", besonders deutlich auf Geräten mit schmalen Bildschirmen zu sehen. Das stört mich, da dadurch auch die Position der Antwortbuttons verschieden ist, und ich möchte es verhindern, indem ich div class="question backgroundLight" eine feste Höhe gebe.
Eine feste Höhe … natürlich nicht irgendeine, sondern eine, die ich vorab per JavaScript ermittle. Ich habe mich gerade dazu belesen, und folgende Vorgehensweise ist mir dazu eingefallen:
Und ich frage mich und natürlich Euch, ob das auch irgendwie einfacher gehen könnte ...
1. wirst Du wahrscheinlich in jedem Fall tun müssen.
Den Rest könntest Du u. U. vereinfachen, indem Du die Fragen und Antworten gleichzeitig in einen Container legst und mit display: flex; nebeneinander anordnest. Da der Default-Wert für align-items stretch ist haben dann alle Fragen und Antworten die selbe Höhe, die sich nach dem höchsten Element richtet. Diese kannst Du dann im Laufe des Spiels verwenden.
Das wird auf jeden Fall funktionieren. Du musst nur dafür sorgen, dass das Ganze für den Spieler unsichtbar bleibt, z. B. indem Du es außerhalb des sichtbaren Browserfensters legst.
Vielen Dank für den Tipp … an so eine CSS-Lösung habe ich gar nicht gedacht. Die probiere ich dann als zweite Variante.
Die erste, oben von mir beschriebene, Variante ist allerdings eine gute Übung in JavaScript. Über Math.max wusste ich heute Morgen noch nichts, das will ich doch wirklich mal ausprobieren.
Ja, es gibt ein resize-Event:
HTML wird auf jeden Fall interpretiert, wenn Du es in das DOM einträgst und es für den Benutzer sichtbar wird.
Aber wenn ich lese class="nowrap" vermute ich, dass Du für den betr. Begriff einen Zeilenumbruch verhindern willst. Das kannst Du ebenso gut mit geschützten Leerzeichen:
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!