看一下this simple JsFiddle I made,它会动画进入列表的新项目.
但是,动画仅影响第一行,而不影响所有行.
我使颜色随机,所以当插入新项目时,您实际上可以看到其他行上的“跳跃”.
有没有办法让它只用CSS影响所有行？
@keyframes enter {
0% {
transform: translateX(-100%);
margin-left: calc(var(--w) * -1);
}
100% {
transform: translateX(0px);
margin-left: 0
}
}
这是我的动画,这是我的列表项：
.slidepush li {
--w: 50px;
width: var(--w);
height: 50px;
background-color: red;
vertical-align: top;
border: 0;
padding: 0;
margin: 0;
display: inline-block;
}
.enter {
animation: enter 1s;
}
Ceated一个管理ul和实现add的简单类：
class SlidePush {
constructor(ulElement) {
this.element = ulElement;
}
add(item) {
this.element.prepend(item.addClass('enter'));
}
}
const sp = new SlidePush($(".slidepush"));
setInterval(() => {//
var colors = ['red','blue','green','black'];
var color = colors[Math.floor(Math.random() * colors.length)];
sp.add($("最佳答案
考虑到nth-child,您可以添加动画,因此您每次都要添加第一个动画.您还需要在完成动画后删除动画,以便在到达下一行时再将其添加到同一元素中.
class SlidePush {
constructor(ulElement) {
this.element = ulElement;
}
add(item) {
this.element.prepend(item);
$('.slidepush li:nth-child(4n+1)').addClass('enter');
setTimeout(function(){ $('.slidepush li:nth-child(4n+1)').removeClass('enter') },1000);
}
}
const sp = new SlidePush($(".slidepush"));
setInterval(() => {//
var colors = ['red','black'];
var color = colors[Math.floor(Math.random() * colors.length)];
sp.add($("div {
--w: 200px;
max-width: var(--w);
}
.slidepush {
list-style: none;
border: 0;
padding: 0;
margin: 0;
display: table;
}
.slidepush li {
--w: 50px;
width: var(--w);
height: 50px;
background-color: red;
vertical-align: top;
border: 0;
padding: 0;
margin: 0;
display: inline-block;
}
.enter {
animation: enter 1s;
position:relative;
z-index:-1;
}
@keyframes enter {
0% {
transform: translateX(-100%);
margin-left: calc(var(--w) * -1);
}
100% {
transform: translateX(0px);
margin-left: 0;
}
}