我的"转换"事件侦听器是否不起作用？

Question

我期望顶部段落随着底部段落淡入而淡出，但元素在动画发生之前从DOM中删除。

当集合(querySelectorAll)中有5个段落时，0索引被删除。CSS动画在createElement中正常工作，而在.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转换而不是动画的问题。

为css动画使用webkitAnimationEnd/animationend事件监听器，为css转换过渡使用webkitTransitionEnd/'transitionend'事件监听器。

如果你不知道，现在你知道了。

我更新了答案与修复我的原始动画

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