Javascript CSS-动画整个ul，而不仅仅是新项目进入时的第一行

看一看哪个正在为进入列表的新项目设置动画

但是，动画仅影响第一行，而不是所有行。 我将颜色设置为随机颜色，因此当插入新项目时，您可以实际看到其他行上的“跳跃”

有没有一种方法可以让它只使用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;
}

添加了一个简单的类，该类管理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($("<li style='background-color:" + color +" !important;'></li>"));
}, 1000);

类滑动推送{
建造师（UleElement）{
this.element=ulElement；
}
添加（项目）{
this.element.prepend（item.addClass（'enter'））；
}
}
const sp=新的SlidePush（$（“.SlidePush”）；
设置间隔（（）=>{//
var colors=['红色'、'蓝色'、'绿色'、'黑色']；
var color=colors[Math.floor（Math.random（）*colors.length）]；
sp.add（$（“
”）；
}, 1000);

您可以添加动画，考虑到第n个子项，因此您总是添加到每行的第一个子项。您还需要在动画完成后删除动画，以便能够在动画到达下一行时将其再次添加到同一元素

类滑动推送{
建造师（UleElement）{
this.element=ulElement；
}
添加（项目）{
此.element.prepend（项）；
$（'.slidepush li:n子项（4n+1）'）.addClass（'enter'）；
setTimeout（function（）{$（'.slidepush li:nth child（4n+1）'））.removeClass（'enter'）}，1000）；
}
}
const sp=新的SlidePush（$（“.SlidePush”）；
设置间隔（（）=>{//
var colors=['红色'、'蓝色'、'绿色'、'黑色']；
var color=colors[Math.floor（Math.random（）*colors.length）]；
sp.add（$（“
”）；
}, 1200);
div{
--w:200px；
最大宽度：var（--w）；
}
.slidepush{
列表样式：无；
边界：0；
填充：0；
保证金：0；
显示：表格；
}
李先生{
--w:50px；
宽度：var（--w）；
高度：50px；
背景色：红色；
垂直对齐：顶部；
边界：0；
填充：0；
保证金：0；
显示：内联块；
}
.进入{
动画：输入1s；
位置：相对位置；
z指数：-1；
}
@关键帧输入{
0% {
转化：translateX（-100%）；
左边距：计算值（var（--w）*-1）；
}
100% {
转换：translateX（0px）；
左边距：0；
}
}



您能试试下面的代码吗


类滑动推送{
建造师（UleElement）{
this.element=ulElement；
}
添加（项目）{
$（'.slidepush li'）.removeClass（'enter'）；
$（'.slidepush li'）.removeClass（'push'）；
$（'.slidepush li:n个子项（4n+1））.addClass（'push'）；
this.element.prepend（item.addClass（'enter'））；
}
}
const sp=新的SlidePush（$（“.SlidePush”）；
setInterval（（）=>{//
var colors=['红色'、'蓝色'、'绿色'、'黑色']；
var color=colors[Math.floor（Math.random（）*colors.length）]；
sp.add（$（“
”）；
}, 1000);
div{
--w:200px；
最大宽度：var（--w）；
}
.slidepush{
列表样式：无；
边界：0；
填充：0；
保证金：0；
显示：表格；
}
李先生{
--w:50px；
宽度：var（--w）；
高度：50px；
背景色：红色；
垂直对齐：顶部；
边界：0；
填充：0；
保证金：0；
显示：内联块；
}
.进入{
动画名称：回车；
动画持续时间：1s；
动画填充模式：正向；
}
.推{
动画名称：推；
动画持续时间：1s；
动画填充模式：正向；
}
@关键帧推送{
0% {
左边距：计算值（var（--w）*-1）；
}
100% {
左边距：0
}
}
@关键帧输入{
0% {
转化：translateX（-100%）；
}
100% {
转换：translateX（0px）；
}
}



问题是它有随机跳跃，不平滑，并且只能在固定宽度（例如200px）下工作。@Jony嗯，我尝试了很多方法，但并不容易。。你对这部动画片有什么想法吗？如果你能做一个静态的例子，说明你希望它看起来如何，它可能会再次帮助你，它不是平滑的，它会在每次插入一个项目时出错