Question

在时间轴运行后，我想在单击时运行动画。但是我无法正常工作。时间轴运行良好，但onclick动画却不能。对如何使其正常工作有任何想法吗？

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

您的<a>标签的类名中有错字

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

应该可以！

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

1 个答案: