鼠标离开后 SVG 动画继续循环

Question

我在同一个页面上有 2 个 svg 动画。他们每个人都应该在悬停时玩，当鼠标离开时，他们将完成无限循环并停止。这很好用，除非我从一个直接移动到另一个。我离开的那个继续玩，直到我离开第二个。当我的鼠标在第二个上时，如何让第一个停止？以下是我的尝试。

这是我的代码笔的 link：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

只需在鼠标离开时调用删除。

我删除了一些看起来 non-functional 的 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>

鼠标离开后 SVG 动画继续循环

SVG animation continues to loop after mouseleave

javascript

css

animation

svg

css-animations