代码之家 › 专栏 › 技术社区 › Ben Beri

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

css-animations css3 css javascript

5

Ben Beri · 技术社区 · 6 年前

看一看 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($("<li style='background-color:" + color +" !important;'></li>"));
}, 1000);

2 回复 | 直到 6 年前

1

3

Temani Afif 6 年前

你可以考虑添加动画 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', 'blue', 'green', 'black'];
var color = colors[Math.floor(Math.random() * colors.length)];
sp.add($("<li style='background-color:" + color +" !important;'></li>"));
}, 1200);

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;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul class="slidepush">

  </ul>
</div>

2

0

Praveen Murali 6 年前

你能试试下面的代码吗。

class SlidePush {

  constructor(ulElement) {
    this.element = ulElement;
  }

  add(item) {
    $('.slidepush li').removeClass('enter');
    $('.slidepush li').removeClass('push');
    $('.slidepush li:nth-child(4n+1)').addClass('push');
    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);

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-name: enter;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

.push {
  animation-name: push;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes push {
  0% {
    margin-left: calc(var(--w) * -1);
  }
  100% {
    margin-left: 0
  }
}

@keyframes enter {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0px);
  }
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<div>
  <ul class="slidepush">

  </ul>
</div>