Javascript 在iOS中加载下一页时,是否可以启用stroke dasharray和stroke dashoffset动画?
我有一个在用户登录时运行的SVG动画。除了iOS中的Safari之外,它在我测试过的所有浏览器中都像预期的那样具有动画效果。在加载下一页之前处理登录时,动画的CSSJavascript 在iOS中加载下一页时,是否可以启用stroke dasharray和stroke dashoffset动画?,javascript,ios,svg,mobile-safari,css-animations,Javascript,Ios,Svg,Mobile Safari,Css Animations,我有一个在用户登录时运行的SVG动画。除了iOS中的Safari之外,它在我测试过的所有浏览器中都像预期的那样具有动画效果。在加载下一页之前处理登录时,动画的CSSrotate()属性会按预期显示,但除非我通过点击url栏中的“x”停止页面加载,否则stroke dasharray和stroke dashoffset不会运行。然后,动画按预期显示 我尝试在而不是上设置笔划动画,在添加元素时使用javascript应用的内联样式设置动画,删除旋转()动画,以与旋转()动画完全相同的方式应用笔划动画
rotate()
属性会按预期显示,但除非我通过点击url栏中的“x”停止页面加载,否则stroke dasharray
和stroke dashoffset
不会运行。然后,动画按预期显示
我尝试在
而不是
上设置笔划动画,在添加元素时使用javascript应用的内联样式设置动画,删除旋转()
动画,以与旋转()
动画完全相同的方式应用笔划动画,将CSS动画应用于svg
中的各个元素,以及许多其他尝试,在登录(或其他需要加载页面的操作)启动时,没有一次尝试显示此笔划动画。这让我相信这与iOS中不同处理的笔划动画有关
有趣的是,CSS rotate()转换在页面加载时没有显示,直到我使用javascript将动画状态设置为running
(即使它添加到页面时应该立即运行,并且在任何其他浏览器中都会运行):
svg.style.webkitAnimationPlayState='running'代码>
不幸的是,以相同的方式将此应用于笔划动画没有效果
我认为这可能是由于iOS在某种程度上对流量进行了优先级排序,但我在苹果的开发文档或其他任何地方都找不到任何文档来解释旋转与笔划动画的处理方式或原因
我本想在某个地方建立一个示例,但我不知道在任何代码共享站点中模拟页面加载的好方法
以下是如何在提交表单时将其添加到页面:
element.innerHTML='';
和css动画(在Sass中):
.container
笔划数组:1200
笔划偏移:0
笔划不透明度:1
笔画宽度:3
笔画:$white
笔划线头:圆形
行程限制:10
动画:ksrotate 2s线性无限,ksdash 1.5s缓进输出无限
-webkit动画:ksrotate 2s线性无限,ksdash 1.5s缓进缓出
@-webkit关键帧旋转
100%
-webkit变换:旋转(360度)
变换:旋转(360度)
@关键帧旋转
100%
-webkit变换:旋转(360度)
变换:旋转(360度)
@-webkit关键帧ksdash
0%
-webkit笔划阵列:1200
-webkit笔划偏移:0
笔划数组:1200
笔划偏移:0
50%
-webkit笔划阵列:89200
-webkit笔划偏移量:-35
行程:89200
行程偏移:-35
100%
-webkit笔划阵列:89200
-webkit笔划偏移量:-124
行程:89200
行程偏移:-124
@关键帧
0%
-webkit笔划阵列:1200
-webkit笔划偏移:0
笔划数组:1200
笔划偏移:0
50%
-webkit笔划阵列:89200
-webkit笔划偏移量:-35
行程:89200
行程偏移:-35
100%
-webkit笔划阵列:89200
-webkit笔划偏移量:-124
行程:89200
行程偏移:-124