javascript - 使用 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>代表换行符。我手边没有演示文稿。

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