如何解决Safari 上的stroke-dashoffset 会出现故障吗?手机和Mac
我有一个使用 svg 的动画。 您可以在此处查看该网站:https://www.demo.simplerwebsites.com
仅用于动画的代码笔:https://codepen.io/webbchris2001/pen/wvojzwE
动画是为了“写文本”。 它在 Firefox 和 Chrome 上运行良好。然而,出于某种原因,在 safari 上它会出现故障并且似乎在眨眼。 手机上的 safari 也是如此。
当我添加 from{stroke-dashoffset: 100%;} 时,它会在所有浏览器中导致相同的故障。 我知道 Safari 不接受用于 stroke-dashoffset 的负值,但我不相信这里会有任何负值?
Javascript:
const masks = ['natur-n','natur-a','natur-t','natur-u','natur-r','comma','kunst-k','kunst-u','kunst-n','kunst-s','kunst-t','and-a','and-n','and-d','design-d','design-e','design-s','design-i','design-g','design-n'];
masks.forEach((mask,index,el) => {
const id = `#${mask}-path`;
let path = document.querySelector(id);
const length = path.getTotalLength();
path.style.strokeDasharray = length;
path.style.strokeDashoffset = length;
});
CSS:
.marketing-lab .mask {
fill: none;
stroke: #fff;
stroke-miterlimit: 10;
stroke-dashoffset: 100%;
}
@keyframes strokeOffset {
to {
stroke-dashoffset: 0;
}
}
#natur-n-path {
animation: strokeOffset 0.2s ease-in-out forwards;
}
#natur-a-path {
animation: strokeOffset 0.2s linear forwards 0.2s;
}
#natur-t-path{
animation: strokeOffset 0.2s linear forwards 0.4s;
}
#natur-u-path {
animation: strokeOffset 0.2s linear forwards 0.6s;
}
#natur-r-path {
animation: strokeOffset 0.2s linear forwards 0.8s;
}
#comma-path{
animation: strokeOffset 0.2s linear forwards 1.0s;
}
#kunst-k-path {
animation: strokeOffset 0.2s linear forwards 1.2s;
}
#kunst-u-path {
animation: strokeOffset 0.2s linear forwards 1.4s;
}
#kunst-n-path {
animation: strokeOffset 0.2s linear forwards 1.6s;
}
#kunst-s-path {
animation: strokeOffset 0.2s linear forwards 1.8s;
}
#kunst-t-path {
animation: strokeOffset 0.2s linear forwards 2.0s;
}
#and-a-path {
animation: strokeOffset 0.2s linear forwards 2.2s;
}
#and-n-path {
animation: strokeOffset 0.2s linear forwards 2.4s;
}
#and-d-path {
animation: strokeOffset 0.2s linear forwards 2.6s;
}
#design-d-path{
animation: strokeOffset 0.2s linear forwards 2.8s;
}
#design-e-path{
animation: strokeOffset 0.2s linear forwards 3.0s;
}
#design-s-path{
animation: strokeOffset 0.2s linear forwards 3.2s;
}
#design-i-path{
animation: strokeOffset 0.2s linear forwards 3.4s;
}
#design-g-path{
animation: strokeOffset 0.2s linear forwards 3.6s;
}
#design-n-path{
animation: strokeOffset 0.2s linear forwards 3.8s;
}
编辑: 事实证明,我在轮播页面上也有这段 javascript。但是我不明白为什么??
let size = carousel_imgs[0].clientWidth;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。