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

Question

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

当集合中有 5 个段落 (querySelectorAll) 时，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;
  }
}

标签： javascriptcss

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