在没有Jquery的Javascript中使用幻灯片效果

Question

我正在开发自己的libarary，我认为幻灯片效果函数会很有用，另外，我制作了一个日历/时钟web应用程序，其目标是作为尽可能的效果。到目前为止我还没有。抱歉。我在网上搜索。

Answer 1

如果您尝试使文本滑入或滑出，CSS将是最有效的。您可以在for循环中使用Javascript setTimeout方法，但CSS动画看起来最平滑。 我做了一个JSFiddle here。

下面是它背后的CSS。

div.slide { 
    transition: left, 2s; 
    -moz-transition: left, 2s; 
    -webkit-transition: left, 2s; 
    -ms-transition: left, 2s; 
    position:relative; 
    left:-150px; 
    border: solid black 2px; 
    width:50px; 
} 
div.hov { 
    border:solid black 2px; 
    position:absolute; 
    width:100px; 
} 
div.hov:hover div.slide { 
    left:48px; 
} 

突出显示“日历”以查看效果。