Impress.js를 사용하여 애니메이션 글 머리 기호 목록 만들기

내일 발표해야 할 프레젠테이션에 대해 impress.js를 사용하고 있습니다. 궁금한 점은 목록이없는 항목에 내 목록 항목을 추가하는 방법입니다. powerpoint/prezi에서 작동하는 것처럼 하나씩 클릭하여 애니메이션을 나열하십시오.Impress.js를 사용하여 애니메이션 글 머리 기호 목록 만들기

은 여기 내 템플릿

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

그리고 여기 내 CSS의 I가 지금까지 애니메이션을하는 모든에 함께 리의하지만, 클릭에 한 번에하지 하나.

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

어떤 아이디어가 있습니까? 줄 바꿈에 대한

<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> 스탠드 :이 같은 다른 목록을 작성할 것입니다 달성하기 위해 무슨 짓을

출처

2014-03-05 Tyler McGinnis

전체 jsFiddle을 제공 할 수 있습니까? '.notes','.step'과'present'가 상호 작용하는 곳은 어디입니까? 감사 :) –