javascript - 在 Javascript 中设置动画时的默认样式属性

Question

我正在制作一个函数来为 DOM 中的元素设置动画。一切正常，除了一件事。

过渡仅在元素具有必须动画的 css 属性时才有效。例如，我想慢慢淡出一个元素(不透明度 1 到不透明度 0)。这仅适用于我手动应用不透明度属性。所以:

<div class="header-logo" id="id" style="opacity: 1;">Logo</div>

适用于以下代码:

animate(css) {
    if(this !== undefined && css) {
        this.css = css;
    }

    let start = performance.now();

    requestAnimationFrame(function animate(time) {
        let timeFraction = (time - start) / this.duration;

        if( timeFraction > 1) timeFraction = 1;

        let timing = this.timer(timeFraction); //Different timers for different easing (like ease-in-out)

        this.draw(timing);

        if (timeFraction < 1) {
            requestAnimationFrame(animate.bind(this));
        }
    }.bind(this));
}

draw(timing) {
    for(let property in this.css) {
            this.element.style[property] -= timing * (this.element.style[property] - this.css[property]);
    }
}

但如果我不应用 opacity: 1;，代码就不会动画。

我的具体问题
如何检查元素是否具有动画样式属性？如果它没有该属性，我如何(动态地)应用要动画的属性(因此无需在 css 表或内联中手动设置它)？

Answer 1

How can I check whether an element has the to be animated style property?

要检查不透明度实际上是否为 1，请手动设置或以其他方式设置:

document.getElementById("id").style.opacity === "1"

检查浏览器是否有效地将不透明度呈现为 1:

document.getElementById("id").style.opacity === ""|| document.getElementById("id").style.opacity === "1"

检查使用 CSS 设置的样式:

window.getComputedStyle(document.getElementById("id")).opacity === "1"

how can I apply (dynamically) the to be animated property (so without setting it by hand in the css sheet or inline)?

document.getElementById("id").style.opacity = "1"

最后一点:请注意，有很多很棒的库可以为您完成所有这些工作。一对是:

• > Jquery (虽然这给你带来的不仅仅是动画)
• > D3 (很棒，但一开始可能是一个陡峭的学习曲线)
• > Dynamicsjs (更小更具体的动画，但背后没有很大的社区)