Как изменить атрибут CSS ключевых кадров в Javascript?

Question

У меня есть 2 селектора from и to внутри области действия @keyframes, например:

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

Я хотел бы изменить атрибут to через JavaScript, но похоже, что даю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>

Есть ли способы изменить attribute внутри to селектора через Javascript?

Answer 1

Самым простым является использование CSS-переменных :

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>

Однако его поддержка все еще не так уж велика, и его очень сложно заполнить, поэтому если вам приходится работать с устаревшими браузерами, вам, возможно, придется переписатьПравило напрямую, добавив новый