javascript - 如何遍历路径元素并一个接一个地为每个元素设置动画?
问题描述
我的以下尝试确实动画,但所有路径同时渲染。这是我不想达到的。如何为一条又一条路径设置动画?
(function () {
var button = document.querySelector('.animate');
button.onclick = function (event) {
var paths = document.querySelectorAll('path');
for (var i = 0; i < paths.length; i++) {
var path = paths[i];
var length = path.getTotalLength();
// Clear any previous transition
path.style.transition = path.style.WebkitTransition = 'none';
// Set up the starting positions
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;
// Trigger a layout so styles are calculated & the browser
// picks up the starting position before animating
path.getBoundingClientRect();
// Define our transition
path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 2s ease-in-out';
// Go!
path.style.strokeDashoffset = '0';
}
};
}());
<div>
<svg width="100" height="100" viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xml:space="preserve" version="1.1"
baseProfile="full">
<path d="M52.25,14c0.25,2.28-0.52,3.59-1.8,5.62c-5.76,9.14-17.9,27-39.2,39.88"
style="fill:none;stroke:black;stroke-width:2" />
<path d="M54.5,19.25c6.73,7.3,24.09,24.81,32.95,31.91c2.73,2.18,5.61,3.8,9.05,4.59"
style="fill:none;stroke:black;stroke-width:2" />
<path d="M37.36,50.16c1.64,0.34,4.04,0.36,4.98,0.25c6.79-0.79,14.29-1.91,19.66-2.4c1.56-0.14,3.25-0.39,4.66,0"
style="fill:none;stroke:black;stroke-width:2" />
<path d="M23,65.98c2.12,0.52,4.25,0.64,7.01,0.3c13.77-1.71,30.99-3.66,46.35-3.74c3.04-0.02,4.87,0.14,6.4,0.29"
style="fill:none;stroke:black;stroke-width:2" />
<path d="M47.16,66.38c0.62,1.65-0.03,2.93-0.92,4.28c-5.17,7.8-8.02,11.38-14.99,18.84c-2.11,2.25-1.5,4.18,2,3.75c7.35-0.91,28.19-5.83,40.16-7.95"
style="fill:none;stroke:black;stroke-width:2" />
<path d="M66.62,77.39c4.52,3.23,11,12.73,13.06,18.82"
style="fill:none;stroke:black;stroke-width:2" />
</svg>
</div>
<p><button class="animate">Animate</button></p>
解决方案
只需设置一个过渡延迟。这是 path.style 的附加参数。您已经在使用的过渡速记。
如果您不想在每个路径上设置样式,请将 CSS 应用到路径元素或给路径一个类并将 CSS 应用到该类。您甚至可以将样式放在父<svg>
元素上,它会级联到<path>
元素。如果这不是一个片段,我会将 CSS 放在一个<style>
标签中,或者通过标签从另一个文件中包含它<link>
。
(function () {
var button = document.querySelector('.animate');
button.onclick = function (event) {
var paths = document.querySelectorAll('path');
for (var i = 0; i < paths.length; i++) {
var path = paths[i];
var length = path.getTotalLength();
// Clear any previous transition
path.style.transition = path.style.WebkitTransition = 'none';
// Set up the starting positions
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;
// Trigger a layout so styles are calculated & the browser
// picks up the starting position before animating
path.getBoundingClientRect();
// Define our transition
path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 2s ease-in-out ' + (2 * i) + 's';
// Go!
path.style.strokeDashoffset = '0';
}
};
}());
path {
fill:none;
stroke:black;
stroke-width:2;
}
<div>
<svg width="100" height="100" viewBox="0 0 100 100">
<path d="M52.25,14c0.25,2.28-0.52,3.59-1.8,5.62c-5.76,9.14-17.9,27-39.2,39.88" />
<path d="M54.5,19.25c6.73,7.3,24.09,24.81,32.95,31.91c2.73,2.18,5.61,3.8,9.05,4.59" />
<path d="M37.36,50.16c1.64,0.34,4.04,0.36,4.98,0.25c6.79-0.79,14.29-1.91,19.66-2.4c1.56-0.14,3.25-0.39,4.66,0"/>
<path d="M23,65.98c2.12,0.52,4.25,0.64,7.01,0.3c13.77-1.71,30.99-3.66,46.35-3.74c3.04-0.02,4.87,0.14,6.4,0.29"/>
<path d="M47.16,66.38c0.62,1.65-0.03,2.93-0.92,4.28c-5.17,7.8-8.02,11.38-14.99,18.84c-2.11,2.25-1.5,4.18,2,3.75c7.35-0.91,28.19-5.83,40.16-7.95" />
<path d="M66.62,77.39c4.52,3.23,11,12.73,13.06,18.82"/>
</svg>
</div>
<p><button class="animate">Animate</button></p>
推荐阅读
- java - Java TypesafeConfig 生成配置键并读取其值
- mapping - 英国地区未映射 Power BI
- debugging - Intellij IDEA 调试器故障:“this”不可用
- postgresql - Terraform 导入 Kubernetes 密钥
- c# - 如何在远离数据库文件的情况下运行程序?
- mysql - 如何在 Azure MySQL 中更改 connect_timeout
- typescript - 具有类验证器的高级条件(可能)?
- react-native - React Native gradlew clean commant 不起作用
- javascript - 广告横幅未在 Chrome 中显示
- reactjs - 从 cellrenderer 组件调用 ag-grid-react 组件的方法