我想知道是否可以附加一个元素并轻轻地将其他元素推离它。
这是我的例子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;
并将其添加到所有新创建的
li
s中,以便外接程序生效,然后将其删除以添加还原悬停功能。Complete CodePen。
编辑:另一个CodePen在动画中有一个(稍微)更好的阶段。在CSS中投入更多的精力可以产生更好的CSS,甚至可以使用JQueryUI。