2014-03-05 69 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>代表換行符。我手頭沒有演示文稿。

這可能不是最好的解決方案,但它在我的演示中起作用。 隨着元素在背景中的透明度,它看起來像突出顯示每個項目。

相關問題