3

我正在使用 impress.js 进行演示，我必须在明天进行演示，我想知道的是如何（或者是否有可能）让我的无序列表中的列表项在单击时一一进行动画处理，就像它会工作一样在 powerpoint/prezi 中。

这是我的模板

<h2>Presentation</h2>
<ul>
    <li> One </li>
    <li> Two </li>
    <li> Three </li>
</ul>

这是我到目前为止的 CSS，它可以将所有 li 动画在一起，但不是一次点击一个。

.notes {
    display:none;
}

.step h2 {
    font-size: 78px;
    font-weight: bold;
}

.step ul {
  list-style-type: square;
  font-size: 1.4em;
  text-align: left;
  line-height: 1.5em;
  list-style-position: inside;
  transform: translateX(-300px);
  -moz-transform: translateX(-300px);
  -ms-transform: translateX(-300px);
  -o-transform: translateX(-300px);
  -webkit-transform: translateX(-300px);
  transition: all 1s ease-in 0s ;
  -moz-transition: all 1s ease-in 0s ;
  -ms-transition: all 1s ease-in 0s ;
  -o-transition: all 1s ease-in 0s ;
  -webkit-transition: all 1s ease-in 0s ;
}

.step.present ul {
  transform: translateX(0px);
  -moz-transform: translateX(0px);
  -ms-transform: translateX(0px);
  -o-transform: translateX(0px);
  -webkit-transform: translateX(0px);
}

有任何想法吗？

4

1 回答 1

1

我所做的是编写不同的列表，如下所示：

<ul>
    <li> One </li>
    <br> (I don't know the command for new line atm)
    <br>
</ul>

<ul>
    <br> 
    <li> Two </li>
    <br>
</ul>

<ul>
     <br>
     <br>
    <li> Three </li>
</ul>

<br>代表换行符。我手头没有演示文稿。

这可能不是最好的解决方案，但它在我的演示文稿中起作用。背景中元素的透明度看起来就像突出显示每个项目。

于 2014-03-06T10:12:09.873 回答