javascript - Css3动态添加的元素没有得到动画

Question

如您所见，我有列表和按钮。当按钮上触发“点击”事件时，我动态地将新元素添加到列表中。将新元素添加到列表后，我想用 javascript 在悬停状态下为它设置动画，但它不起作用。硬编码列表元素一切正常。

想到的第一个解决方案是对列表元素的最大数量进行硬编码，并隐藏不需要的内容。但是，如果我不知道元素的最大数量怎么办？

Here is code

HTML

<section> 
  <div class='wrap'>
    <ul>
      <li class="box"></li>
      <li class="box stacked"></li>
    </ul>
  </div>
  <button> addBox </button>
</section>

CSS/Sass

.box
  width: 100px
  height: 100px
  border: 1px solid black
  background: orange
  flex-basis: 1

.stacked
  margin-left: -50px

.up 
  animation-name: boxUp
  animation-duration: 300ms
  animation-timing-function: ease-in-out
  animation-delay: 0s
  animation-iteration-count: 1
  animation-direction: normal
  animation-fill-mode: forwards


@keyframes boxUp
  from
    transform: translate(0, 0)
  to
    transform: translate(0, -25px)

Javascript

$('button').click(function(e) {
  $('ul').append($('<li>').attr('class', 'box stacked'));
});

$('.box').hover(function() {
  $(this).addClass('up');
}, function(){
  $(this).removeClass('up');
});

Answer 1

由于它是一个动态添加的元素，因此在附加事件处理程序时它不会出现在 DOM 中。因此，您将不得不使用从一开始就存在于 DOM 中的父代的委托(delegate)(即，使用作为页面静态内容并且在加载时就存在的父代)。

您可以使用以下任一方法:

$('body').on('mouseenter mouseleave', `.box`, function() {
  $(this).toggleClass('up');
});

或您最终使用的下面那个:

$('ul').on('mouseenter mouseleave', 'li', function(){ 
  $(this).toggleClass('up'); 
});

CodePen Demo