2014-03-05 40 views
3

我使用impress.js进行演示我必须提供明天我想知道的是如何(或者如果有可能)将我的列表项目放在我的无序在点击中逐个列出动画,就像在powerpoint/prezi中工作一样。使用Impress.js创建动画项目符号列表

这里是我的模板

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

,这里是我的CSS我到目前为止这动画的所有李时珍在了一起,却没有一个在上点击一次。

.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); 
} 

有什么想法吗?

+1

你能否提供完整的jsFiddle? “.notes”,“.step”和“present”在哪里互动?谢谢 :) –

回答

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

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

相关问题