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

Question

I have 2 selectors from and to inside of @keyframes scope like this:

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

I would like to change to 's attribute through JavaScript, but seems like giving style property to .pie doesn't work as I wanted it. It creates the attribute to .pie directly instead of to selector.

This is how I've done so far:

 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>

Are there any ways to change the attribute inside of to selector through Javascript?

Answer 1

The easiest is to use 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>

However its support is still not that great, and it's really hard to polyfill so if you have to handle legacy browsers, you may need to rewrite the rule directly, by appending a new <style> with the whole @keyframes block:

 class Timer { constructor(elem) { this.elem = document.querySelector(elem); this.change(); } change() { const style = document.createElement('style'); style.textContent = ` @keyframes pie { from { stroke-dashoffset: 0; } to { stroke-dashoffset: ${ 10 }px; } }` document.head.appendChild( style ); } } 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>