如何使文本svg动画在可见时启动

How to make text svg-animation launch when visible?

本文关键字：启动 动画 何使 文本 svg      更新时间：2023-09-26

我的页面上有三个部分`

    <a href="#" class="next-section">Next Section</a>
    <div class="section-content">
    </div>
</section>
<section id="about">
    <a href="#" class="prev-section">Previous Section</a>
    <a href="#" class="next-section">Next Section</a>
    <div class="section-content">
        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="480px" height="640px" viewBox="0 0 480 640" enable-background="new 0 0 480 640" xml:space="preserve">
<rect x="68.631" y="175.105" fill="none" width="350.877" height="113.158"/>

"SVG-PATHS HERE">

    </div>
</section>
<section id="services">
    <a href="#" class="prev-section">Previous Section</a>
    <div class="section-content">
    </div>
</section>

他们用javascript 点击滚动

 jQuery.fn.extend({
  scrollTo : function(speed, easing) {
    return this.each(function() {
      var targetOffset = $(this).offset().top;
      $('html,body').animate({scrollTop: targetOffset}, speed, easing);
    });
  }
});
$('.next-section').click(function(e){
    e.preventDefault();
    var $this = $(this),
        $next = $this.parent().next();
    $next.scrollTo(150, 'linear');
});
$('.prev-section').click(function(e){
    e.preventDefault();
    var $this = $(this),
        $prev = $this.parent().prev();
    $prev.scrollTo(150, 'linear');
});

在第二节中，我有一些svg，使用CSS进行动画处理，但我希望在svg可见时开始动画处理。我该怎么做？

您可以将一个"complete"函数传递给jQuery animate()。该完整函数在动画完成时被调用。在该函数中，您可以向SVG中添加一个类来触发动画。

相关文章：