使用 css3 和 jquery 动画滑入和滑出答案

【问题标题】：Slide in and slideout using css3 and jquery animation使用 css3 和 jquery 动画滑入和滑出
【发布时间】：2013-08-01 16:30:13
【问题描述】：

我正在使用 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;}
}

jQuery

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

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

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

但它不适用于 chrome，部分适用于 Firefox。有没有办法像垂直自动收报机一样添加平滑的滑动效果。

【问题讨论】：

也检查了它与 chrome 的关系。
@sonusindhu 它没有提供滑动效果。
嘿嘿嘿 chrome 和 mozilla 的效果一样

标签： jquery html css

【解决方案1】：

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

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

【讨论】：

它只是“不起作用”所以你什么都不做？你为什么不研究一下 CSS3 动画是如何工作的，试着摆弄你的代码并找出解决方案呢？您甚至可能不需要这里的人的帮助。