我的“過渡”事件偵聽器不起作用嗎？

Question

我預計頂部段落會隨着底部段落的淡入淡出，但在 animation 發生之前，該元素已從 DOM 中刪除。

當集合中有 5 個段落 (querySelectorAll) 時，0 索引將被刪除。 CSS animation 按預期工作 createElement not for.remove()

我錯過了什么？

 function addPara() { let r = Math.floor(Math.random() * 9); let g = Math.floor(Math.random() * 9); let b = Math.floor(Math.random() * 9); let bg = `#${r}${g}${b}` let qsaPara = document.querySelectorAll('p'); const para = document.createElement('p') para.style.backgroundColor = bg para.style.height = '3rem' document.body.appendChild(para) let paraArray = Array.from(qsaPara); let l = paraArray.length let clVal = para.classList.value; function parRemove() { paraArray[0].remove(); paraArray[0].removeEventListener('transitionend', parRemove) } if (paraArray.length >= 5) { paraArray[0].classList.add('fall'); // para.innerHTML += `class:${clVal}` paraArray.forEach((para, i) => { para.nextSibling.innerHTML = `index ${i}, collection length${l}, class:${clVal}`; }); //------------------------ paraArray[0].addEventListener('transitionend', parRemove, false); //---------------------- } else if (paraArray.length <= 5) { paraArray.forEach((para, i) => { para.innerHTML = `index ${i}, collection length${l}, class:${clVal}` }) } } const paraTimer = setInterval(addPara, 2000);

 p { color: white; width: 100%; animation-name: fade-in; animation-duration: 1s; animation-iteration-count: 1; transition: all ease-in-out 1s; }.fade { animation-name: fade-out; animation-duration: 1s; animation-iteration-count: 1; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }

Answer 1

這似乎是 transitionend 期望 CSS 變換而不是 animation 的問題。

對 css 動畫使用 webkitAnimationEnd / animationend 事件監聽器，對 css 變換過渡使用 webkitTransitionEnd / 'transitionend' 事件監聽器。

如果你不知道，那么現在你知道了。

我用我原來的 animation 的修復更新了答案

 function addPara() { let r = Math.floor(Math.random() * 9); let g = Math.floor(Math.random() * 9); let b = Math.floor(Math.random() * 9); let bg = `#${r}${g}${b}` let qsaPara = document.querySelectorAll('p'); const para = document.createElement('p') para.style.backgroundColor = bg para.style.height = '3rem' document.body.appendChild(para) let paraArray = Array.from(qsaPara); let l = paraArray.length let clVal = para.classList.value; function parRemove() { paraArray[0].remove() // paraArray[0].removeEventListener('transitionend', parRemove) paraArray[0].removeEventListener("webkitAnimationEnd", parRemove); paraArray[0].removeEventListener("animationend", parRemove, false); } if (paraArray.length >= 5) { paraArray.forEach((para, i) => { para.nextSibling.innerHTML = `index ${i}, collection length${l}`; // for css transition /* paraArray[0].classList.add('fall'); paraArray[0].addEventListener('transitionend', parRemove, false) */ // for css animation paraArray[0].classList.add('fade'); paraArray[0].addEventListener('webkitAnimationEnd', parRemove, false); // Code for Chrome, Safari and Opera paraArray[0].addEventListener("animationend", parRemove, false); }); } else if (paraArray.length <= 5) { paraArray.forEach((para, i) => { para.innerHTML = `index ${i}, collection length${l}` }) } } const paraTimer = setInterval(addPara, 2000);

 p { opacity: 1; color: white; width: 100%; animation-name: fade-in; animation-duration: 1s; animation-iteration-count: 1; /* transition: all ease-in-out 1s; */ }.fade { animation-name: fade-out; animation-duration: 1s; animation-iteration-count: 1; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } /*.fall { transform: scale(3); transform: translateY(9rem); opacity: 0; }. */