javascript - 从左到右动画列表

Question

我用 jQuery 做了这个动画:

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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>

我必须使用纯 JavaScript 制作相同的动画，因为我需要将它集成到 Angular 中。

任何人都可以帮助我解决这个问题或提出更好的方法吗？

Answer 1

使用普通的 JS 和 CSS，您可以执行以下操作:

function animateList() {
  const items = document.getElementsByTagName("li");
  [...items].forEach((item, i) => {
    setTimeout(function() {
      item.classList.add("animation");
    }, 300 * i);
  });
}

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

.animation {
  transition: 800ms;
  opacity: 1;
  left: 0;
}

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

<button onclick="animateList()">Animate!</button>