从左侧逐个动画列表项答案

【问题标题】：Animate list items from left one by one从左侧逐个动画列表项
【发布时间】：2016-09-24 20:05:38
【问题描述】：

如何设置列表项的动画以从左侧滑动并一一淡入？单击按钮后 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

【问题讨论】：

标签： javascript jquery css animation

【解决方案1】：

您可以使用translateX() 来制作slideIn 效果，使用opacity 来制作fadeIn 并将其添加到类中。您还可以使用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>

【讨论】：

实际上，在 Firefox 中有效，但在 Safari 中无效。添加 -webkit- 前缀没有帮助...

【解决方案2】：

它不包括淡入（您可以自己为不透明度设置动画），但您可以使用 materialize-css 的交错列表

编辑：虽然演示显示了使用按钮单击，但您可以通过调用任意方式进行操作

Materialize.showStaggeredList('#staggered-test')

您应该将#staggered-test 替换为与您的列表匹配的选择器。

【讨论】：

谢谢，但我已经在使用 Foundation，最终我希望动画在菜单滑入时开始，所以不要点击按钮。
网站上的演示通过单击按钮即可工作，但您可以按照自己喜欢的方式进行操作（即使在间隔或其他事件内）

【解决方案3】：

使用 Greensocks TweenMax.staggerTo 、TweenMax.staggerFrom 和 TweenMax.staggerFromTo 就可以了。

【讨论】：

我会试试的！谢谢！

【解决方案4】：

添加“显示：无；”到 li 然后使用 setTimeout() 在每个 li 出现之间有 1s 的间隙。这是您更正的代码：

ul {list-style-type: none; }

li {display:none;}

$("button").on('click', function(){
  var i = 0;
  $('ul li').each(function() {
    var _this = $(this);
    setTimeout(function() {
      _this.fadeIn();
    }, i*1000);
    i++;
  });
});

http://codepen.io/g1un/pen/WGpJvw?editors=0010

【讨论】：

【解决方案5】：

我不认为这可以用纯 CSS 来完成（我希望！）所以这里有一个使用 JQuery 和递归的解决方案。

显然 Stackoverflow 的 sn-p 工具不允许使用 jquery，所以这里是没有工具的代码。

JavaScript

function fadeInSequentially (element) {
  if (element == null || element.length === 0) {
    return;
  }
  $(element).fadeIn(400, function () {
    fadeInSequentially($(element).next());
  });
}

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

  setTimeout(function() {
  fadeInSequentially($("li").first());

   }, 800);

});

CSS

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

HTML

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

【讨论】：

【解决方案6】：

您需要自定义 CSS。

CSS

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

    ul > li {
    position: relative;
    padding: 12px 6px;
    color: #34495e;
    background: #fff;
    cursor: pointer;
    left: -100%;
    opacity: 0;
    margin-bottom: 5px;
}
 ul > li:before {
    content: "\f105";
    position: absolute;
    font-size: 31px;
    right: 10px;
    font-family: 'FontAwesome' !important;
    top: 7px;
    color: #6f6f6f;
    }

HTML

<button>Click</button>

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

<script>
    $("button").on('click', function(){
    $('ul> li').each(function (i) {
           $(this).delay(300 * i).animate({ opacity: 1, left: 0 }, 800);
      });
    });

</script>

提琴手链接https://jsfiddle.net/2jro7kco/

【讨论】：