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();

});

CodePen：

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

Answer 1

您可以使用translateX()制作slideIn效果，使用opacity制作fadeIn，然后将其添加到课程中。您还可以使用delay()为逐个运行的元素制作动画。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

它不包含淡入（您可以自己动画不透明度），但您可以使用交错的materialize-css

列表

编辑虽然演示会显示按钮点击的使用，但无论如何都可以通过调用

来实现

Materialize.showStaggeredList('#staggered-test')

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

Answer 3

使用Greensocks TweenMax.staggerTo，TweenMax.staggerFrom和TweenMax.staggerFromTo即可完成此任务。

Answer 4

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

显然Stackoverflow的代码段工具不允许使用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>

Answer 5

添加＆＃39;显示：无;＆＃39;到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

Answer 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>

Fiddler link https://jsfiddle.net/2jro7kco/

逐个动画列表中的项目

6 个答案: