1
如您所见,我有列表和按钮。当在按钮上触发“点击”事件时,我会动态地将新元素添加到列表中。将新元素添加到列表后,我想使用JavaScript在悬停状态下对其进行动画处理,但它不起作用。一切都很好,硬编码列表元素。Css3动态添加元素未获得动画
想到的第一个解决方案是硬编码列表元素的最大数量,当隐藏什么是不必要的。但是,如果我不知道元素的最大数量呢?
的Html
<section>
<div class='wrap'>
<ul>
<li class="box"></li>
<li class="box stacked"></li>
</ul>
</div>
<button> addBox </button>
</section>
CSS /萨斯
.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');
});
使用委派它是一个动态添加的元素。 – Harry
谢谢。找到了解决方案。 $('ul')。on('mouseenter mouseleave','li',function(){ $(this).toggleClass('up'); }); – user7666810
是的,发布答案 – user7666810