有什么方法可以使用纯CSS为居中的嵌入式块元素设置动画？我想做的是在添加（或删除）列表项时为<li>元素内部的动画设置动画<ul>。看看我的jsfiddle，添加新项目时，其他先前项目略微向左跳以保持居中对齐。我想做的是为该跳跃设置动画以使其平滑。
div.wrap {
width: 330px;
text-align: center;
}
ul#list {
margin: 0;
}
ul#list > li {
display: inline-block;
width: 50px;
height: 50px;
border: 3px solid blue;
list-style-type: none;
}
提前致谢 ：）
我认为newItem本身可以是动画中（或oldItem可以是动画出使用CSS）的动画属性使用JavaScript的一点点的帮助下（是的，你仍然需要它）。
但是，根据上述任何一种情况，对其他项的重新调整进行动画处理都会有些复杂。
无论如何，看看这个小提琴作为示范。
片段：
function addItem(list, newItem) {
newItem.insertAdjacentHTML('beforeEnd', 'X');
list.appendChild(newItem);
newItem.classList.add('animatein');
}
function removeItem(list){
var oldItem = null;
if (list.childNodes.length > 0){
oldItem = list.childNodes[list.childNodes.length - 1];
oldItem.classList.remove('animatein');
oldItem.classList.add('animateout');
oldItem.addEventListener('animationend', function(){
list.removeChild(oldItem);
});
}
}
var list = document.getElementById('list');
var newItem = document.createElement('li');
var button = document.getElementById('add');
var removeButton = document.getElementById('remove');
button.addEventListener('click', function () {
addItem(list, newItem.cloneNode());
});
removeButton.addEventListener('click', function(){
removeItem(list);
});div.wrap {
width: 330px;
text-align: center;
}
ul#list {
margin: 0;
}
ul#list > li {
position: relative;
display: inline-block;
width: 50px;
height: 50px;
border: 3px solid blue;
list-style-type: none;
}
.animatein { animation: .4s fadein; }
.animateout { animation: .4s fadeout; }
@keyframes fadein {
from { opacity: 0; left: 100px; }
to { opacity: 1; left: 0px; }
}
@keyframes fadeout {
from { opacity: 1; left: 0px; }
to { opacity: 0; left: 100px; }
}<div class="wrap">
<ul id="list"></ul>
</div>
<button id="add">Add</button>
<button id="remove">Remove</button>这是您要找的东西吗？希望这会有所帮助。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句