Css3 dynamisch hinzugefügt Element nicht animiert werden

Question

Wie Sie sehen, habe ich Liste und Schaltfläche. Wenn ein "Klick" -Ereignis auf der Schaltfläche ausgelöst wird, füge ich dynamisch ein neues Element zur Liste hinzu. Nachdem ein neues Element zur Liste hinzugefügt wurde, möchte ich es im Hover-Status mit Javascript animieren, aber es funktioniert nicht. Mit fest codierten Listenelementen ist alles in Ordnung.

Die erste Lösung, die in den Sinn kommt, besteht darin, die maximale Anzahl der Listenelemente fest zu codieren und zu verbergen, was nicht notwendig ist. Aber was, wenn ich die maximale Anzahl der Elemente nicht kenne?

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

Da es ein dynamisch hinzugefügt Element ist, wird es nicht vorhanden sein, das DOM zu dem Zeitpunkt, zu dem die Ereignisbehandlungsroutinen angehängt sind. Daher müssen Sie die Delegierung von einem übergeordneten Element verwenden, das von Anfang an im DOM vorhanden ist (dh Sie verwenden ein übergeordnetes Element, das ein statischer Inhalt der Seite ist und direkt vor dem Laden vorhanden ist).

könnten Sie entweder den unten:

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

oder den, unter dem Sie am Ende mit:

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

CodePen Demo