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 本身可以动画（或 oldItem 可以动画 out ）在一些JavaScript的帮助下使用CSS animation 属性（是的，你仍然需要它。）

但根据上述任何情况制作其他项目的重新调整动画有点复杂。

无论如何，请查看 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>

这是你在找什么？希望这在某种程度上有所帮助。

动画居中的内联块元素

1 个答案: