0

我正在制作一个包含多个窗格的网站，以及一个用于在它们之间切换的导航菜单。我想使用 CSS 中的过渡效果为窗格切换设置动画。窗格是 <li> 元素：

<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 属性设置动画，以使窗格左右滚动，进出视图：

@-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 个窗格，此过程会很笨重（代码的长度随着窗格的数量呈二次方增长）。

那么......你将如何为任意数量的窗格编写这个？

编辑：我知道我可以使用 javascript 来生成 CSS 代码，但我希望有一种我错过的更优雅的方式。

4

1 回答 1

0

我不知道您是否已经死定了为此使用关键帧 - 虽然关键帧允许更高级的动画，但您的特定滑动示例可以通过简单的 css 过渡来完成。

.content{
  -webkit-transition:margin-left 1s ease-in-out;
  transition:margin-left 1s ease-in-out;
}

该规则表示，只要属性更改，内容块将使用 1 秒的缓动过渡margin-left，您可以在用户导航时在 javascript 中执行此操作。

您可以在webkit 博客上找到更多关于 css 转换的信息。

于 2012-05-21T03:57:09.580 回答