我的“过渡”事件侦听器不起作用吗？

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; }. */