我正在制作一个包含多个 Pane 的网站,以及一个用于在它们之间切换的导航菜单。我想使用 CSS 中的过渡效果为 Pane 切换设置动画。 Pane 是
<ol class="content">
<li class="pane">This is pane 1.</li>
<li class="pane">This is pane 2.</li>
<li class="pane">This is pane 3.</li>
</ol>
,它们并排放置,所以我正在为内容的 margin-left 属性设置动画,使 Pane 左右滚动,进入和离开 View :
@-webkit-keyframes scroll1to2 {
from {margin-left: 0%;}
to {margin-left: -100%;}
}
@-webkit-keyframes scroll2to3 {
from {margin-left: -100%;}
to {margin-left: -200%;}
}
@-webkit-keyframes scroll1to3 {
from {margin-left: 0%;}
to {margin-left: -200%;}
}
,当然可以反转。问题是,对于 3 个以上的 Pane ,此过程将变得笨拙(代码的长度随 Pane 的数量呈二次方增长)。
那么...对于任意数量的 Pane ,您将如何编写此代码?
编辑:我知道我可以使用 javascript 生成 CSS 代码,但我希望有一种我错过的更优雅的方式。
最佳答案
我不知道您是否对为此使用关键帧死心塌地 - 虽然关键帧允许更高级的动画,但您的特定滑动示例可以通过简单的 css 过渡来完成。
.content{
-webkit-transition:margin-left 1s ease-in-out;
transition:margin-left 1s ease-in-out;
}
此规则说明内容 block 将在 margin-left
属性更改时使用 1 秒缓动过渡,您可以在用户导航时在 javascript 中执行此操作。
您可以在 webkit blog 上找到有关 css 转换的更多信息.
关于任意数量 Pane 的 CSS 动画过渡效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10679141/