Question

我有一个在用户登录时运行的SVG动画。它在我测试的所有浏览器中按照预期动画，但iOS中的Safari除外。在加载下一页之前处理登录时，动画的CSS rotate()属性会按预期显示，但除非我停止，stroke-dasharray和stroke-dashoffset才会运行通过点击＆＃34; x＆＃34;加载页面在网址栏。然后，动画按预期显示。

我尝试在<path>而不是<circle>上设置动画动画，使用添加元素时通过javascript应用的内联样式动画，删除rotate()动画，应用笔画动画的方式与rotate()动画完全相同，将CSS动画应用于svg中的单独元素，以及许多其他尝试 - 没有一个可以让这个笔画动画在符号出现时显示in（或其他需要页面加载的动作）被启动。这让我相信它与iOS中处理不同的笔画动画有关。

有趣的是，CSS旋转（）转换在页面加载时没有显示，直到我使用javascript将动画状态设置为running（即使它应该在添加到页面时立即运行并且它在任何其他浏览器）：

svg.style.webkitAnimationPlayState = 'running';

不幸的是，以相同的方式将此应用于笔触动画无效。

我认为这可能是由于iOS在某种程度上优先考虑流量，但我无法在Apple的开发文档中找到任何文档或在其他任何地方解释旋转的处理方式和原因与笔画动画的处理方式不同。

我希望在某个地方设置一个示例，但我不知道在任何代码共享网站中模拟页面加载的好方法。

以下是在表单提交时如何将其添加到页面中：

element.innerHTML = '<div class="loader"><svg id="container" class="container"><circle id="path" cx="22" cy="22" r="16" fill="none"></circle></svg></div>';

css动画（在Sass中）：

.container
    stroke-dasharray: 1, 200
    stroke-dashoffset: 0
    stroke-opacity: 1
    stroke-width: 3
    stroke: $white
    stroke-linecap: round
    stroke-miterlimit: 10
    animation: ksrotate 2s linear infinite, ksdash 1.5s ease-in-out infinite
    -webkit-animation: ksrotate 2s linear infinite, ksdash 1.5s ease-in-out 


@-webkit-keyframes ksrotate 
    100% 
        -webkit-transform: rotate(360deg)
        transform: rotate(360deg)

@keyframes ksrotate 
    100% 
        -webkit-transform: rotate(360deg)
        transform: rotate(360deg)

@-webkit-keyframes ksdash 
    0% 
        -webkit-stroke-dasharray: 1, 200
        -webkit-stroke-dashoffset: 0
        stroke-dasharray: 1, 200
        stroke-dashoffset: 0

    50%
        -webkit-stroke-dasharray: 89, 200
        -webkit-stroke-dashoffset: -35
        stroke-dasharray: 89, 200
        stroke-dashoffset: -35

    100%
        -webkit-stroke-dasharray: 89, 200
        -webkit-stroke-dashoffset: -124
        stroke-dasharray: 89, 200
        stroke-dashoffset: -124

@keyframes ksdash 
    0% 
        -webkit-stroke-dasharray: 1, 200
        -webkit-stroke-dashoffset: 0
        stroke-dasharray: 1, 200
        stroke-dashoffset: 0
    50%
        -webkit-stroke-dasharray: 89, 200
        -webkit-stroke-dashoffset: -35
        stroke-dasharray: 89, 200
        stroke-dashoffset: -35

    100% 
        -webkit-stroke-dasharray: 89, 200
        -webkit-stroke-dashoffset: -124
        stroke-dasharray: 89, 200
        stroke-dashoffset: -124

在iOS中加载下一页时，是否可以为stroke-dasharray和stroke-dashoffset设置动画？

0 个答案: