effects - 没有 Jquery 的 Javascript 中的幻灯片效果

Question

我正在自己的库中工作，我认为幻灯片效果功能会很有用，另外，我正在制作日历/时钟网络应用程序，它的目标是尽可能地填充效果。到目前为止我还没有。对不起。我在网上搜索了所有内容。

Answer 1

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

这是它背后的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;
}

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