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

【问题标题】：Create an animated bullet point list using Impress.js使用 Impress.js 创建动画项目符号列表
【发布时间】：2014-03-05 22:21:59
【问题描述】：

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

有什么想法吗？

【问题讨论】：

你能提供完整的jsFiddle吗？ .notes、.step 和 present 在哪里互动？谢谢:)

标签： javascript css impress.js

【解决方案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> 代表换行符。我手头没有演示文稿。

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

【讨论】：