Anime.js-在事件上结合时间线和动画

Question

I would like to run an animation on click, after the timeline runs. But I can't get it to work. The timeline runs fine, but the onclick animation doesn't. Any idea on how to get this to work properly?

HTML:

<section id="step-1">
  <h1 class="ml3">Title</h1
  <a href="#" class="next-step">Next Step</a>
</section>

JS:

$( document ).ready(function() {

  // Wrap every letter in a span
  $('.ml3').each(function(){
    $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
  });

  var timelineStep1 = anime.timeline({loop: false});

  timelineStep1
    .add({
      targets: '.ml3 .letter',
      opacity: [0,1],
      easing: "easeInOutQuad",
      duration: 2250,
      delay: function(el, i) {
        return 100 * (i+1)
      }
    })
    .add({
      targets: '.next-step',
      opacity: [0,1],
      easing: "easeInOutQuad",
      duration: 2250,
      /*delay: function(el, i) {
        return 150 * (i+1)
      }*/
    });

  var nextStep = anime({
    targets: '#step-1',
    opacity: 0,
    duration: 2250,
    easing: "easeInOutQuad",
    autoplay: false
  });

  $('#step-1 .next-step').click(function(e){
    e.preventDefault();
    nextStep.play;
  });

});

Answer 1

You have a typo in your classname of your <a> tag

<section id="step-1">
  <h1 class="ml3">Title</h1
  <a href="#" class="next-step">Next Step</a>
</section>

That should work!