javascript - 使用CSS让div中的段落一个一个连续出现

Question

我的 html 上有这段代码:

<div id="container">
   <div id="animate" class="slide">
      <p>Some paragraph.</p>                 
      <p>Some paragraph</p>
              ...
      <p>Some paragraph</p>
   </div>
</div>

和这个脚本:

$(document).ready(function(){
    var i = 1;
    document.addEventListener("click", function(){
       if (i==n) { $("#container").show(); $("#animate").addClass("slide");}
                      ...
       if (i==1) { some code;}
    });
 });

请不要介意那里的“一些代码”，因为我认为它不相关。

无论如何，我在外部样式表上也有这个:

.slide p{
    animation-name: slide;
    animation-duration: 1s;
    animation-timing-function: ease;
}

@keyframes slide {
    0% { transform: translateY(100%);}
    100%{ transform: translateY(0%);}
}

@-webkit-keyframes slide {
    0% { -webkit-transform: translateY(100%);}
    100% { -webkit-transform: translateY(0%);}
}

所以当用户第 n 次点击他/她的鼠标时，<div>将出现并触发动画。但是，发生的情况是所有段落将同时出现(因为我仍然不知道如何将其逐个动画化)。

问题是否有可能一次一个地连续地(无需进一步/额外点击)动画段落，看起来像电影中的片尾字幕？

编辑

澄清:我的意思是连续，这意味着，例如，第一段将出现并首先制作动画。一段时间后，它会在屏幕上消失，然后下一段会出现……等等。无需用户进一步点击，段落将不断出现和消失，直到最后一段。

Answer 1

其他使用 JQuery 的方法你可以试试这个....

Javascript:

document.addEventListener("click", function(){
    $('#animate p:first').slideDown(1000, AnimatePara);
});

function AnimatePara(){
    $(this).slideUp(1000);

    $(this).next('p').slideDown(1000, AnimatePara);
}

CSS:

p{display:none;}

这是 jsfiddle: http://jsfiddle.net/30q3gh36/3/ http://jsfiddle.net/30q3gh36/4/