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

【问题标题】：How to change a CSS attribute of keyframes in Javascript?如何更改 Javascript 中关键帧的 CSS 属性？
【发布时间】：2019-11-09 21:54:11
【问题描述】：

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

@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改变to选择器内部的attribute？

【问题讨论】：

你考虑过使用css变量吗？
也许这会有所帮助：stackoverflow.com/questions/28971942/…
@AdamOrlov 我认为您提供的链接与我的案例无关。我的主要问题是提供或更改@keyframes selectors 内部的属性。您链接中的 OP 不使用 @keyframes 或 CSS 中的任何选择器。
@Bravo 我在 CSS 中将属性设置为 stroke-dashoffset: var(LGdashOffset)，并尝试在 JS 中更改我的代码，如下所示：document.documentElement.style.LGdashOffset = 101 + 'px'; 但to 选择器的属性仍然没有改变。
var(LGdashOffset) 不是您在 CSS 中使用 css vars 的方式...而document.documentElement.style.LGdashOffset = 101 + 'px' 不是您更改它们的方式！！这是我学到的davidwalsh.name/css-variables-javascript

标签： javascript html css svg css-selectors

【解决方案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>

但是它的支持仍然不是那么好，而且它真的很难 polyfill，所以如果你必须处理旧版浏览器，你可能需要直接重写规则，通过在整个 @keyframes 块中附加一个新的

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>

【讨论】：