我使用CSS和jquery做了一个简单的svg-stroke-animation。单击即开始动画。但是我找不到第二次点击（或第三次点击）重新启动的方法。我认为解决方案非常简单，但仍然没有任何效果（例如.addClass）。
它应该是这样工作的：
1.可见中风
2.用户点击图片
3.中风动画开始
4.完成后：中风保持可见
5.用户再次单击
6.中风动画再次开始....
这是我当前的代码：
jQuery(document).ready(function () {
$("#form").click(function () {
var path1 = document.querySelector('#umriss');
var length = path1.getTotalLength();
$(path1).css("stroke-dasharray", length);
});
});body {
width: 100%;
font-size: 20px;
background-color: #eee;
}
.wrapper {
margin: 0 auto;
text-align: center;
max-width: 700px;
}
.bild{
width: 100%;
height: 0;
padding-top: 100%;
position: relative;
}
svg{
position: absolute;
height: 100%;
width: 100%;
left:0;
top:0;
}
#umriss {
stroke-dashoffset: 2600;
animation: ani1 4s linear forwards;
}
@keyframes ani1 {
to {
stroke-dashoffset: 0;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Stroke</title>
</head>
<body>
<div class="wrapper">
<div class="bild">
<svg id="form" x="0px" y="0px" width="812.959px" height="581.971px" viewBox="0 0 812.959 581.971" enable-background="new 0 0 812.959 581.971" xml:space="preserve">
<path id="umriss" fill="#3CC243" stroke="#141412" stroke-width="10" stroke-miterlimit="10" d="M137.521,128.454 C139.812,9.278,220.056,16.972,313.194,20.365c136.466,4.97,179.837,72.616,205.304,200.859
c21.428,107.905,195.473,45.773,260.65,56.229c39.317,6.308-28.293,212.529-53.685,245.178
c-61.222,78.716-262.76,32.434-351.007,35.777c-102.917,3.899-125.172-88.539-81.979-175.921
c71.457-144.56-162.979-48.431-225.951-44.29C-22.9,344.077,25.05,112.387,137.521,128.454z"/>
</svg>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
我仅使用JQuery来启动动画。其他所有事情都由CSS完成。我在HTML中添加了一个用于控制动画的复选框。该复选框可见，但您可以将其隐藏（可见性：隐藏或显示：无）。 我希望这是您要实现的目标。
$(label).click(function(){
$(this).addClass("test");
});body {
width: 100%;
font-size: 20px;
background-color: #eee;
}
.wrapper {
margin: 0 auto;
text-align: center;
max-width: 700px;
}
.bild {
width: 100%;
height: 0;
padding-top: 100%;
position: relative;
}
svg {
position: absolute;
left: 0;
top: 0;
}
#umriss {
stroke-dasharray: 2333.43;
stroke-dashoffset: 2333.43;
}
.test #umriss {
animation: ani1 4s linear forwards;}
[type="checkbox"] {
position: absolute;
top: 0;
left: 0;
}
[type="checkbox"]:checked + label #umriss {
animation: ani2 4s linear forwards;
}
@keyframes ani1 {
from {
stroke-dashoffset: 2333.43;
}
to {
stroke-dashoffset: 0;
}
}
@keyframes ani2 {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 2333.43;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="bild">
<input type="checkbox" id="anim"/>
<label for="anim" id="label">
<svg id="form" x="0px" y="0px" width="200" viewBox="0 0 812.959 581.971">
<path id="umriss" fill="#3CC243" stroke="#141412" stroke-width="10" stroke-miterlimit="10" d="M137.521,128.454 C139.812,9.278,220.056,16.972,313.194,20.365c136.466,4.97,179.837,72.616,205.304,200.859
c21.428,107.905,195.473,45.773,260.65,56.229c39.317,6.308-28.293,212.529-53.685,245.178
c-61.222,78.716-262.76,32.434-351.007,35.777c-102.917,3.899-125.172-88.539-81.979-175.921
c71.457-144.56-162.979-48.431-225.951-44.29C-22.9,344.077,25.05,112.387,137.521,128.454z"/>
</svg>
</label>
</div>
</div>
在CSS中，我使用选择器:checked开始播放一个或另一个动画。
在这种情况下，我使用click事件将类.test添加到bild，并且我使用事件animationend删除了.test类。希望对您有所帮助。
bild.addEventListener("click",()=>{
bild.classList.add("test")
})
//umriss.addEventListener("webkitAnimationEnd",..... );
umriss.addEventListener("animationend",()=>{
console.log("end")
bild.classList.remove("test");
} );body {
width: 100%;
font-size: 20px;
background-color: #eee;
}
.wrapper {
margin: 0 auto;
text-align: center;
max-width: 700px;
}
.bild {
width: 100%;
height: 0;
padding-top: 100%;
position: relative;
}
svg {
position: absolute;
left: 0;
top: 0;
}
#umriss {
stroke-dasharray: 2333.43;
stroke-dashoffset: 0;
}
.test #umriss {
animation: ani1 4s linear forwards;
}
@keyframes ani1 {
from {
stroke-dashoffset: 2333.43;
}
to {
stroke-dashoffset: 0;
}
} <div class="wrapper">
<div id="bild">
<svg id="form" x="0px" y="0px" width="200" viewBox="0 0 812.959 581.971">
<path id="umriss" fill="#3CC243" stroke="#141412" stroke-width="10" stroke-miterlimit="10" d="M137.521,128.454 C139.812,9.278,220.056,16.972,313.194,20.365c136.466,4.97,179.837,72.616,205.304,200.859
c21.428,107.905,195.473,45.773,260.65,56.229c39.317,6.308-28.293,212.529-53.685,245.178
c-61.222,78.716-262.76,32.434-351.007,35.777c-102.917,3.899-125.172-88.539-81.979-175.921
c71.457-144.56-162.979-48.431-225.951-44.29C-22.9,344.077,25.05,112.387,137.521,128.454z"/>
</svg>
</div>
</div>