我想知道是否可以附加一个元素并轻轻地将其他元素推离它。
这是我的例子CodePen

/*
var i = 0;
var timerId = setInterval(function(){
  $("ul").append("<li></li> ");
    i++;
    if(i >= 3) {
      clearInterval(timerId);
    }
},800);
*/

$("button").on("click", function() {
  $("ul").append("<li></li> ");
});

button {
  display: block;
  margin: 0 auto;
  cursor: pointer;
  border: none;
  width: 150px;
  height: 40px;
  border-radius: 5px;
}

ul {
  display: block;
  list-style: none;
  padding: 10px;
  margin: 0;
  text-align: center;
}

li {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: rgba(25, 160, 255, 1);
  border: 3px solid black;
  border-radius: 15px;
  cursor: pointer;
  margin: 0 3px;

  transition: all 0.2s ease-in-out;
  transform-orgin: center;
  animation-name: popin;
	animation-duration: 0.3s;
	animation-timing-function: easeout;

}

li:hover{
  transform: scale(1.2);
}


@keyframes popin {
  0% {
    transform: scale(0.2);
    background: rgba(25, 160, 255, 0);
  }
  75% {
    transform: scale(1.2);
    background: rgba(25, 160, 255, 1);
    animation-timing-function: easeout;
  }
  100% {
    transform: scale(1);
    background: rgba(25, 160, 255, 1);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button>Add More</button>
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

你可以看到,现有的元素被赶走的方式,有没有办法动画这个职位的变化?

最佳答案

Sure there is。通常,添加元素时只需要隐藏元素,然后延迟显示元素,JQuery非常擅长这样做。像这样的东西。

$n = $("<li></li>").hide();
$("ul").append($n);
$n.show(300); // 300 being the number of milliseconds to take to get to full opacity

好吧,那是你通常会做的。但是,由于您已经将transition属性添加到li元素中,因此这会由于某些不明确的原因覆盖JQuery的动画,从而停止缓慢的添加效果。
解决方法相当简单,创建一个新的CSS类
transition: intial;

并将其添加到所有新创建的lis中,以便外接程序生效,然后将其删除以添加还原悬停功能。
Complete CodePen
编辑:另一个CodePen在动画中有一个(稍微)更好的阶段。在CSS中投入更多的精力可以产生更好的CSS,甚至可以使用JQueryUI。

10-05 20:47
查看更多