Javascript 更改 css 不透明度持续时间 - Javascript

在 Web 开发中，我们常常需要通过 JavaScript 来改变 DOM 元素的 css 样式。其中，不透明度（opacity）是一个比较常用的样式属性。但是，如果我们想要在一定的时间内从起始值改变到结束值，我们需要使用动画（Animation）。

动画基础

通常，我们可以使用 JavaScript 中的 setInterval() 函数和 CSS 中的 @keyframes 规则来创建一个简单的动画效果。其中，setInterval() 函数用于每隔一段时间重复执行一段代码，@keyframes 规则用于定义动画的关键帧。

以下是一个使用 setInterval() 和 @keyframes 创建动画的示例：

let elem = document.getElementById("myElem");
let opacity = 0;
let intervalId = setInterval(function() {
    opacity += 0.1;
    elem.style.opacity = opacity;
    if (opacity >= 1) {
        clearInterval(intervalId);
    }
}, 100); // 定义时间间隔为 100 毫秒

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

上述示例中，我们先获取了一个 DOM 元素 myElem，然后定义了一个变量 opacity 作为起始的不透明度值。接着，使用 setInterval() 函数来每隔 100 毫秒执行一次代码。在代码块中，我们将 opacity 增加 0.1，并将其设置为 myElem 元素的不透明度。如果不透明度超过了 1，我们将停止 setInterval() 的执行。

同时，我们还定义了一个 fadeIn 的 @keyframes 规则，其中，from 和 to 表示动画的关键帧，即从起始状态到结束状态的变化过程。

更改不透明度持续时间

在上述示例中，我们可以看到动画的时间间隔是 100 毫秒，而不透明度的变化是线性的。如果我们想要控制动画的时间长度，可以结合 @keyframes 规则的 animation-duration 属性。该属性可以指定动画的持续时间，单位为秒（s）或毫秒（ms）。

以下是一个修改动画持续时间的示例：

let elem = document.getElementById("myElem");
elem.style.animation = "fadeIn 2s linear forwards";

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

上述示例中，我们将 elem 元素的 animation 样式属性设置为 fadeIn 2s linear forwards。其中，fadeIn 是我们之前定义的 @keyframes 规则，2s 表示动画持续 2 秒，linear 表示动画的变化方式是线性的，forwards 表示动画完成后保持最终状态。

结论

通过以上示例，我们可以使用 JavaScript 中的 setInterval() 函数和 CSS 中的 @keyframes 规则来创建动画效果，并且使用 animation-duration 属性来控制动画的持续时间。如果你想要进一步了解动画，可以查看 CSS 中的 animation 属性和 JavaScript 中的 requestAnimationFrame() 函数。