【问题标题】: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】:

    【讨论】:

    • 我会试试的!谢谢!
    【解决方案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/

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 2018-03-19
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2012-05-01
          • 1970-01-01
          相关资源
          最近更新 更多