javascript - 当它出现在视口(viewport)中时开始 SVG 动画

Question

当动画出现在视口(viewport)中时，我很难尝试开始动画。我已经在此处搜索了有关堆栈溢出的先前提出的问题，但我似乎无法弄清楚如何调整 JS 以满足我的需求。我最近的尝试是尝试让粉红色线条在出现在视口(viewport)中时开始其动画……正如我想象的那样，一旦成功，我就可以将其应用于其余元素。如果您还需要什么，请告诉我。有任何想法吗？ codepen

SVG

<svg version="1.1" id="animate" class="animatedSVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="792px" height="815px" viewBox="0 0 792 815" xml:space="preserve">

  <path id="purple" class="purple-stroke purpleAnimation" d="M597.645,416.25c0,121.334-98.361,219.695-219.695,219.695"/>

  <path id="green" class="green-stroke" d="M173.096,197.039c-58.343,54.482-94.817,132.087-94.817,218.211 c0,164.857,133.644,298.5,298.5,298.5"/>

  <path id="red" class="red-stroke" d="M636.449,415.25c0,143.318-116.182,259.5-259.5,259.5c-143.318,0-259.5-116.182-259.5-259.5"/>

  <path id="yellow" class="yellow-stroke" d="M585.398,201.588c55.557,54.209,90.051,129.907,90.051,213.662 c0,164.857-133.644,298.5-298.5,298.5"/>

  <path id="pink" class="pink-stroke pinkAnimation" d="M376.949,77.25c26.421,0,52.134,3.031,76.81,8.766c149.667,34.779,261.19,168.983,261.19,329.234"/>

</svg>

CSS

.pink-stroke {
  fill:none;
  stroke:#E199C3;
  stroke-width:40;
  stroke-linecap:round;
  stroke-dasharray: 1000;
  stroke-dashoffset:1000;
   -webkit-animation: dash 2s linear forwards;
  animation: dash 2s linear forwards; 
}

.pinkAnimation {
  fill:none;
  stroke:#E199C3;
  stroke-width:40;
  stroke-linecap:round;
  stroke-dasharray: 1000;
  stroke-dashoffset:1000;
-webkit-animation: dash 2s linear forwards;
      animation: dash 2s linear forwards;
}

.purple-stroke{
  fill:none;
  stroke:#9E70B0;
  stroke-width:40;
  stroke-linecap:round;
  stroke-miterlimit:10;
  stroke-dasharray: 1000;
  stroke-dashoffset:1000;
  -webkit-animation: dash 2s linear forwards;
  animation: dash 2s linear forwards;
  -webkit-animation-delay:.85s;
  animation-delay:.85s;
}

.green-stroke{
  fill:none;
  stroke:#21B585;
  stroke-width:40;
  stroke-linecap:round;
  stroke-miterlimit:10;
  stroke-dasharray: 1000;
  stroke-dashoffset: -1000;
  -webkit-animation: dash 2s linear forwards;
  animation: dash 2s linear forwards;
  -webkit-animation-delay:1.25s;
  animation-delay:1.25s;
}

.red-stroke{
  fill:none;stroke:#E9706C;
  stroke-width:40;
  stroke-linecap:round;
  stroke-miterlimit:10;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  -webkit-animation: dash 2s linear forwards;
  animation: dash 2s linear forwards;
  -webkit-animation-delay:.85s;
  animation-delay:.85s;
}

.yellow-stroke {
  fill:none;
  stroke:#EFEF99;
  stroke-width:40;
  stroke-linecap:round;
  stroke-miterlimit:10;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  -webkit-animation: dash 2s linear forwards;
  animation: dash 2s linear forwards;
  -webkit-animation-delay:.45s;
  animation-delay:.45s;
}


@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }

JS

var onAppear = [];

document.addEventListener("DOMContentLoaded", function() {
  onAppear = [].map.call(document.querySelectorAll("#animate"), function(item ) {
    return item;
  });
}, false);

window.addEventListener("scroll", function() {
  onAppear.forEach(function(elem) {
    var vwTop = window.pageYOffset;
    var vwBottom = (window.pageYOffset + window.innerHeight);
    var elemTop = elem.offsetTop;
    var elemHeight = elem.offsetHeight;

    if (vwBottom > elemTop && ((vwTop - elemHeight) < elemTop)) {
     elem.classList.add(".pinkAnimation");
      elem.classList.remove(".pink-stroke")

    } else {
      elem.classList.remove("pinkAnimation");
      elem.classList.add ('.pink-stroke')
    }
  });
}, false);

Answer 1

我能够解决这个问题...我确信有更好的选择，但它确实有效。我使用了以下脚本并更新了相应的 CSS 样式以匹配。这是更新的 codepen .

JS

$(window).scroll(function() {
  var wScroll = $(this).scrollTop();

  if (wScroll > $('#animate').offset().top - ($(window).height() / 1.2)) {
    $("#pink").attr("class", "pink-stroke dash-pink");
    $("#yellow").attr("class", "yellow-stroke dash-yellow");
    $("#red").attr("class", "red-stroke dash-red");
    $("#purple").attr("class", "purple-stroke dash-purple");
    $("#green").attr("class", "green-stroke dash-green");

  } else {
    $("#pink").attr("class", "pink-stroke");
    $("#yellow").attr("class", "yellow-stroke");
    $("#red").attr("class", "red-stroke");
    $("#purple").attr("class", "purple-stroke");
    $("#green").attr("class", "green-stroke");
  }
});