我有一个 SVG 路径动画,目前处于无限循环中。我希望动画在被点击事件触发之前是不可见的,然后一旦动画完成(一次,不是无限次)按钮就不再起作用。
我已经添加了一个测试按钮,但动画似乎仍然在页面加载后立即播放并且按钮对其没有影响。
$("#button").click(function() {
$('.dashed').toggleClass('path');
});
.dashed{
stroke-dasharray: 10;
}
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear infinite;
}
@keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="612px" height="792px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">
<path class="path" fill="none" stroke="#000000" stroke-linejoin="round" stroke-miterlimit="10" d="M23.742,10.709
c-2.305,23.611-8.81,46.563-9.021,70.829c-0.252,28.966,22.237,43.666,47.06,55.482c23.642,11.255,42.368,15.766,68.461,16.631
c19.993,0.663,40.08,2.97,59.853-1.723c23.301-5.531,45.542-17.598,66.978-27.933c19.248-9.281,38.831-21.86,41.946-45.201
c5.539-41.51-54.993-47.073-81.885-42.17C159.05,47.212,89.37,104.633,77.387,164.629c-5.896,29.522-4.312,60.884,12.703,86.354
c19.17,28.697,49.512,49.927,78.596,67.591"/>
<path class="dashed" fill="none" stroke="white" stroke-width="4" stroke-linejoin="round" stroke-miterlimit="10" d="M23.742,10.709
c-2.305,23.611-8.81,46.563-9.021,70.829c-0.252,28.966,22.237,43.666,47.06,55.482c23.642,11.255,42.368,15.766,68.461,16.631
c19.993,0.663,40.08,2.97,59.853-1.723c23.301-5.531,45.542-17.598,66.978-27.933c19.248-9.281,38.831-21.86,41.946-45.201
c5.539-41.51-54.993-47.073-81.885-42.17C159.05,47.212,89.37,104.633,77.387,164.629c-5.896,29.522-4.312,60.884,12.703,86.354
c19.17,28.697,49.512,49.927,78.596,67.591"/>
</svg>
<input type="button" id="button" value="Animate" />
最佳答案
a) 清空类 .path
但将其保留在那里:
.path { }
b) 将您从 .path
中删除的动画属性添加到新的 css 类中,并将动画属性中的“infinite”替换为“1”。
.path-animation {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear 1;
}
c) 使用以下 jquery 实现您需要的结果:
$("#button").click(function() {
$('.path').attr('class', 'path path-animation');
//5 secs delay to complete the animation before removing it and disabling the button.
setTimeout(function() {
$('.path').attr('class', 'path');
$("#button").attr("disabled","disabled");
}, 5000);
});
关于javascript - 单击按钮开始的 SVG 路径动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40488526/