當SVG動畫出現在視口中時開始

Question

當動畫出現在視口中時，我花了一些時間嘗試開始播放動畫。 我已經在此處搜索了關於堆棧溢出的先前提出的問題，但是我似乎無法弄清楚如何使JS適應我的需要。 我的最新嘗試是嘗試使粉紅色線條出現在視口中時開始使其動畫……正如我想象的那樣，一旦可行，我就可以將其應用於其余項目。 如果您還有其他需要，請告訴我。 有任何想法嗎？ 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");
  }
});