动画居中的内联块元素

Question

有没有什么方法可以使用纯 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;
}

提前致谢:)

Answer 1

我认为 newItem 本身可以动画 in （或者oldItem 可以使用 CSS [=36] 动画 out) =]animation 属性一点点的帮助 JavaScript （是的，你仍然需要它）。

但是，根据上述任何一种场景，动画重新调整其他项目有点复杂。

总之先看看this fiddle作为示范吧

片段：

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>

这是您要找的吗？希望这在某种程度上有所帮助。

动画居中的内联块元素

Animating centered inline block elements

html

css

css-animations