从左边一个一个的动画列表项

Question

如何动画列表项从左侧滑动并一一淡入？单击按钮后动画开始 1 秒？

HTML：

<button>Click</button>

<ul>  
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

CSS：

ul {list-style-type: none; display:none;}

JS：

$("button").click(function(){

  $("ul").fadeIn();

});

代码笔：

http://codepen.io/i76/pen/YGkaZv

Answer 1

您可以使用translateX()幻灯片效果和opacity淡入淡出并将其添加到类中。您还可以使用delay()让元素上的动画一个接一个地运行。

$("button").click(function() {
  $("li").delay(500).each(function(i) {
    $(this).delay(100 * i).queue(function() {
      $(this).addClass("show");
    })
  })
});

ul {
  list-style-type: none;
  overflow: hidden;
  padding: 0;
}

li {
  transform: translateX(-100%);
  transition: transform 0.5s, opacity 2s;
  opacity: 0;
}

.show {
  opacity: 1;
  transform: translateX(0%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click</button>

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>