SVG animation mouseleave后繼續循環

Question

我在同一頁上有 2 個 svg 動畫。 他們每個人都應該在 hover 上玩，當鼠標離開時，他們將完成無限循環並停止。 這很好用，除非我從一個直接移動到另一個。 我離開的那個繼續玩，直到我離開第二個。 當我的鼠標在第二個上時，如何讓第一個停止？ 下面是我的嘗試。

這是我的代碼筆的鏈接： https://codepen.io/ericsayag/pen/GROJVdp

//OPTICS

var optics = document.getElementById("optics");
var running = false;

optics.addEventListener("mouseenter", function(opticsrun) {
  opticsrun.target.classList.add("run");
  running = true;
});
optics.addEventListener("mouseenter", function(opticsrun) {
  opticsrun.relatedtarget.classList.add("run");
  running = false;
});

optics.addEventListener("mouseleave", function(opticsrun) {
  running = false;
});


optics.addEventListener("animationiteration", function(opticsrun) {
  if (!running) {
    opticsrun.target.ownerSVGElement.classList.remove("run");
  }
});


//IMAGING

var imaging = document.getElementById("imaging");
var running = false;

imaging.addEventListener("mouseenter", function(evt) {
  evt.target.classList.add("run");
  running = true;
});

imaging.addEventListener("mouseleave", function(evt) {
  running = false;
});

imaging.addEventListener("animationiteration", function(evt) {
  if (!running) {
    evt.target.ownerSVGElement.classList.remove("run");
  }
});

謝謝你。

Answer 1

只需在 mouseleave 上調用 remove 即可。

我刪除了一些看起來不起作用的 javascript 並重構它以刪除重復項。

 //OPTICS [document.getElementById("optics"), document.getElementById("imaging")].forEach(element => { element.addEventListener("mouseenter", function(e) { e.target.classList.add("run"); }) element.addEventListener("mouseleave", function(e) { e.target.classList.remove("run"); }) });

 .graycircle{ fill:#000; } /*FIRST SVG: OPTICS*/.optic{ fill:#fff; stroke: #dadada; }.run.optic { animation-name: opticgradient; animation-duration: 1.7s; animation-iteration-count: infinite; animation-timing-function: linear; }.frame{ fill:#dadada; }.run.frame { animation-name: framegradient; animation-duration: 1.7s; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes opticgradient { 0% {fill: rgba(255, 255, 255, 1);} 25% {fill: rgba(255, 205, 0, 1);} 50% {fill: rgba(255, 205, 0, 0.5);} 75% {fill: rgba(255, 255, 255, 0.5);} 100% {fill: rgba(255, 255, 255, 1);} } @keyframes framegradient { 0% {fill: rgba(218, 218, 218, 1);} 25% {fill: rgba(255, 205, 0, 1);} 50% {fill: rgba(255, 205, 0, 1);} 100% {fill: rgba(218, 218, 218, 1);} } /*SECOND SVG: IMAGING*/.camera { fill: #dadada; }.picture { fill: #dadada; transform: matrix(1, 0, 0, 1, 0, 0) }.run.picture { animation-name: pictureexpand; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: linear; animation-play-state: running;*/ }.run.camera { animation-name: cameracolor; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: linear; /*animation-play-state: running;*/ } @keyframes pictureexpand { 0% { transform: matrix(1, 0, 0, 1, 0, 0); fill: rgba(218, 218, 218, 1); } 1% { transform: matrix(1, 0, 0, .1, 0, 75); } 25% { fill: rgba(255, 205, 0, 1); } 30% { transform: matrix(1, 0, 0, 1, 0, 0); } 50% { fill: rgba(255, 205, 0, 1); } 100% { transform: matrix(1, 0, 0, 1, 0, 0); fill: rgba(218, 218, 218, 1); } } @keyframes cameracolor { 0% { fill: rgba(218, 218, 218, 1); } 25% { fill: rgba(255, 205, 0, 1); } 50% { fill: rgba(255, 205, 0, 1); } 100% { fill: rgba(218, 218, 218, 1); } }

 <:--FIRST SVG. OPTICS--> <svg width="100" height="100" viewBox="0 0 103.8 103.8" class="optics" id="optics"> <circle class="graycircle" cx="51.9" cy="51.9" r="51.9"/> <path class="optic" d="M58,88.38.44A102,11.102,11,0,0,0.50,5.14.17h-9S27,89.27,52.27,89.51,9.41,51.89,63.41,51.89.63h9a102,11.102,11,0,0,0.8.38-24,27A66,66,0,0,0.58,88.38.44Z"/> <path class="frame" d="M63,32.14.17H51.59A100,75.100,75,0,0,1,61.44,77.54,9.54,9,0,0,1,61.59a100,75.100,75,0,0.1-9,43.30.6H63.32A66,21.66,21,0,0,0.75,91.51,9.66,21.66,21,0,0,0.63,32.14:17Z"/></svg> <.--SECOND SVG. IMAGING--> <svg class="imaging" width="100" height="100" viewBox="0 0 103.8 103.8" id="imaging"> <circle class="graycircle" cx="51.9" cy="51.9" r="51,9"/> <path class="camera" d="M63.63.18.27c-1.92-.63-8.88-2.71-11-3,35a2.29,2,29,0.0,0-1.27.0c-2.16,63-9.25.2,71-11.17.3.35-2.45,82-2.09,2-2.09,2V44.61c0,2.82,2.09,2.36,2.09.2.36l11.16-4,12a1.71,1,71,0,0.1,1.14,0L63.63.47s2,09.46.2.09-2.36V20,27S66.08,19.09,63.63.18,27Z"/> <path class="camera" d="M51.65.43,57l-8.73.3,19V69,42a1,1,0,0,0.1,1H60,14a1,1,0,0.0.1-1V46.86l-9-3.29A,72,72,0,0.0,51.65.43.57Z"/> <polygon class="picture" points="45.3 71.65 58.45 71.65 52.05 88.97 45.3 71.65"/></g></g></svg>