0

我正在使用 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。有没有办法像垂直自动收报机一样附加平滑的滑动效果。

4

1 回答 1

0

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

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

于 2013-08-01T08:21:37.823 回答