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

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

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

1 个答案: