jquery - 使用 css3 和 jquery 动画滑入和滑出

Question

我正在使用 css3 动画将一个 div 向下滑动到一个包含几组 div 的列表。我正在尝试实现像本网站中的垂直新闻自动收报机一样的滑入和滑出效果

http://buildinternet.s3.amazonaws.com/projects/totem/index.html

CSS

.slidein{ animation:slide 1799ms linear; top:0px; -webkit-animation:slide 1799ms linear;}

@keyframes slide
{
0%{ top:-100px;}
100%{ top:0px;}
}
@-webkit-keyframes  slide
{
0%{ top:-100px;}
100%{ top:0px;}
}  

查询

 $(".parentDiv").prepend('<div class="newdiv slidein"></div>').children().slice(5);
}

对于向下滑动，我尝试使用 follwing div 使用顶部和底部值将其上下移动

$(".existingDivs").css({"bottom":""});
      $(".existingDivs").css({"bottom":"90px"});
     $(".existingDivs").animate({   
            top: '+=92'          
        },2000);  

但它在 chrome 中不起作用，在 firefox 中部分起作用。有没有办法附加平滑的滑动效果，如垂直自动收报机。

Answer 1

我将从 CSS 值中删除 slide。浏览器将在您指定的值之间转换，无论如何这将是一个幻灯片。

为什么使用 jQuery 以不同的方式制作动画？为什么不使用 CSS3 过渡然后滑出？