如何在Javascript中更改关键帧的CSS属性？

Question

我在from范围内有2个选择器to和@keyframes，如下所示：

@keyframes pie {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: 77px;
    }
}

我想通过JavaScript更改to的属性，但是似乎style的.pie属性不能按我的需要工作。它直接将属性创建为.pie，而不是to选择器。

到目前为止，这是我的工作方式：

class Timer {
    constructor(elem) {
        this.elem = document.querySelector(elem);
        this.change();
    }
    change() {
        this.elem.style.strokeDashoffset = 10 + 'px';
    }
}
let getTimer = new Timer('.pie');

svg.timer {
    width: 40px;
    height: 40px;
    transform: rotateY(-180deg) rotateZ(-90deg);
}
circle {
    stroke-dasharray: 77px;
    stroke-dashoffset: 0px;
    stroke-width: 2px;
    stroke: brown;
    animation: pie 10s linear infinite forwards;
}
@keyframes pie {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: 77px;
    }
}

<div class="pie">
    <svg class="timer">
        <circle r="12" cx="20" cy="20">
        </circle>
    </svg>
</div>

是否有任何方法可以通过Javascript更改attribute选择器内部的to？

Answer 1

最简单的是使用CSS-variables：

class Timer {
    constructor(elem) {
        this.elem = document.querySelector(elem);
        this.change();
    }
    change() {
        this.elem.style.setProperty('--dashoffset',  10 + 'px');
    }
}
let getTimer = new Timer('.pie');

svg.timer {
    width: 40px;
    height: 40px;
    transform: rotateY(-180deg) rotateZ(-90deg);
}
circle {
    stroke-dasharray: 77px;
    stroke-dashoffset: 0px;
    stroke-width: 2px;
    stroke: brown;
    animation: pie 10s linear infinite forwards;
}
@keyframes pie {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: 77px;
        stroke-dashoffset: var(--dashoffset);
    }
}
.pie { --dashoffset: 77px; }

<div class="pie">
    <svg class="timer">
        <circle r="12" cx="20" cy="20">
        </circle>
    </svg>
</div>

然而，它的支持仍然不是那么好，而且很难进行填充，因此，如果您必须处理旧版浏览器，则可能需要直接重写规则，方法是在整个@keyframes块后面附加一个新的