Question

我正在创建一个函数来为DOM中的元素设置动画。一切都有效，除了一件事。

转换仅在元素具有必须动画的css属性时才起作用。例如，我想慢慢淡出一个元素（不透明度1到不透明度0）。这仅适用于我手动应用opacity属性。所以：

<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

如何检查元素是否具有动画样式属性？

要检查不透明度是否实际为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"

如何（动态）应用动画属性（所以没有在css表或内联中手动设置？？

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

作为最后的评论：请注意，有很多优秀的图书馆正在为您完成所有这些工作。一对夫妇是：

Jquery（虽然这给你的不仅仅是动画）
D3（太棒了，但开始时可能是一个陡峭的学习曲线）
Dynamicsjs（更小，更具体的动画，但背后不是一个非常大的社区）

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

1 个答案: