使用Impress.js创建动画项目符号列表

Question

我正在使用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);
}

有什么想法吗？

Answer 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>代表换行符。我手头没有演示文稿。

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