兄弟悬停时的目标动画播放状态

Question

当我将鼠标悬停在某个元素上时，我正在尝试为该元素周围的 SVG 路径设置动画。

我用这样的 CSS 编写动画：

 #circle-1 {
    fill-opacity: 0;
    fill: transparent;
    stroke: #000;
    stroke-width: 1;
    stroke-dasharray: 163px;
    stroke-dashoffset: 163px;
    animation-name: circle;
    animation-duration: 4000ms;
    animation-iteration-count: 1;
    animation-play-state: paused;
}

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

效果很好。当我尝试像这样在兄弟元素悬停时触发动画时，它会停止工作：

HTML

<h1 id="link-1">#1</h1>
<svg width="57px" height="46px" viewBox="0 0 57 46" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="circle-1">
        <path d="M1252.39102,182.674299 C1222.56333,182.674299 1186.23852,210.300373 1230.21581,223.998154 C1278.92632,239.170208 1268.93364,185.408886 1243.06946,182.674299" id="Path-3"></path>
    </g>
</svg>

CSS

#circle-1 {
    fill-opacity: 0;
    fill: transparent;
    stroke: #000;
    stroke-width: 1;
    stroke-dasharray: 163px;
    stroke-dashoffset: 163px;
    animation-name: circle;
    animation-duration: 4000ms;
    animation-iteration-count: 1;
    animation-play-state: paused;
}

#circle-1.active {
    animation-play-state: running;
}

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

JS

window.onload = function() {
    var circle1 = document.getElementById("circle-1");
    var link1 = document.getElementById("link-1");
    for (var i = 0; i < circle1.length; i++) {
         link1[i].addEventListener('mouseover', function() {
             circle1.classList.add('active');
             return false;
         });
    }
};

在此处查看代码： https://codepen.io/louden/pen/YLeBXB

我不想使用 jQuery。

Answer 1

几个问题：

var circle1 = document.getElementById("circle-1");

返回一个路径元素。那么for (var i = 0; i < circle1.length; i++) { 是什么意思？ 应该在那里做？使用getElementsByTagName 等作为列表...

你的路径 d 属性扩展了 svg，所以要扩展 svg，首先清除所有过时的 widht/height 属性。使用viewBox 属性和preserveAspectRatio="none"。这样你就可以控制纵横比。使用 css 作为宽度和高度。

一个工作小提琴：

https://jsfiddle.net/ibowankenobi/40p2fqgc/1/

无限动画：https://jsfiddle.net/ibowankenobi/40p2fqgc/2/

<h1 id="link-1">#1</h1>
<svg viewBox="0 0 2000 2000" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path id="circle-1" d="M1252,182 C1222,182 1186,210 1230,223 C1278,239 1268,185 1243,182"/>
</svg>

这是针对您拥有的点击处理程序的：

https://jsfiddle.net/ibowankenobi/40p2fqgc/10/

附带说明，getElementsByTagName 已上线，因此您无需再次调用它。

这是一个鼠标悬停的取消动画：

https://jsfiddle.net/ibowankenobi/40p2fqgc/15/