Javascript Vanilla js fadeIn动画不'；行不通

我想用vanilla js制作淡入效果的动画，但是动画元素没有保持不透明度1。它显示的时间很短，但随后就消失了

var carousel = document.getElementById('myCarousel');
window.onload = function() {
    carousel.style.opacity = 0;
    (function fadeIn() {
        console.log('timer working');
        (carousel.style.opacity += .1) > 1 ? carousel.style.opacity = 1 : setTimeout(fadeIn, 1000)
    })();
}

---

timeout函数正在工作，但我不明白为什么元素在达到1时不保持不透明度1。

这是因为CSS属性在内部存储为字符串，所以在本例中，+=作为字符串追加.1

这就是第一个增量工作的原因：“0'+'.1'='0.1'，但后续增量无效并被忽略（“0.1'+'.1'='0.1.1'）

如果手动将style.opacity强制转换为浮点值，则可以使用：

var carousel=document.getElementById（'myCarousel'）；
window.onload=函数（）{
carousel.style.opacity=0；
（功能fadeIn（）{
console.log（“计时器工作”）；
（carousel.style.opacity=parseFloat（carousel.style.opacity）+.1）>1？carousel.style.opacity=1:setTimeout（fadeIn，1000）
})();
}

#myCarousel{
背景色：#ff0000；
高度：100px；
宽度：100px；
}

---

这是因为CSS属性在内部存储为字符串，所以在本例中，+=作为字符串附加.1

这就是第一个增量工作的原因：“0'+'.1'='0.1'，但后续增量无效并被忽略（“0.1'+'.1'='0.1.1'）

如果手动将style.opacity强制转换为浮点值，则可以使用：

var carousel=document.getElementById（'myCarousel'）；
window.onload=函数（）{
carousel.style.opacity=0；
（功能fadeIn（）{
console.log（“计时器工作”）；
（carousel.style.opacity=parseFloat（carousel.style.opacity）+.1）>1？carousel.style.opacity=1:setTimeout（fadeIn，1000）
})();
}

#myCarousel{
背景色：#ff0000；
高度：100px；
宽度：100px；
}

---

carousel.style.opacity

是一个字符串，这就是为什么您需要在某个时候解析它。为了提高可读性，我还将避免使用这样复杂的三元运算符，以利于提前返回：

window.onload = function() {
    carousel.style.opacity = 0;
    (function fadeIn() {
        var opacity = parseFloat(carousel.style.opacity);

        if (opacity == 1) return;

        carousel.style.opacity = opacity + 0.1;
        setTimeout(fadeIn, 1000);
    })();
};

---

演示：

carousel.style.opacity

是一个字符串，这就是为什么您需要在某个时候解析它。为了提高可读性，我还将避免使用这样复杂的三元运算符，以利于提前返回：

window.onload = function() {
    carousel.style.opacity = 0;
    (function fadeIn() {
        var opacity = parseFloat(carousel.style.opacity);

        if (opacity == 1) return;

        carousel.style.opacity = opacity + 0.1;
        setTimeout(fadeIn, 1000);
    })();
};

---

演示：

为什么要用JS计算一切。 CSS可能是您的anwser；）

var test=document.getElementById（“test”）；
函数切换（）{
test.classList.toggle（'fadeIn'）；
}

#测试{
-webkit转换：1s不透明度；
过渡：1s不透明度；
不透明度：1；
}
#法代因{
不透明度：0；
}

正文
切换淡入淡出

为什么要用JS计算一切。 CSS可能是您的anwser；）

var test=document.getElementById（“test”）；
函数切换（）{
test.classList.toggle（'fadeIn'）；
}

#测试{
-webkit转换：1s不透明度；
过渡：1s不透明度；
不透明度：1；
}
#法代因{
不透明度：0；
}

正文
切换淡入淡出状态

我很惊讶它居然能工作。请记住，样式值是字符串，因此

+=

可能不会达到您的预期效果。尝试将

console.log（carousel.style.opacity+0+0+0）

放入函数中。你很可能会看到那些多余的零

因此，要使其起作用，您必须将字符串转换为数字，因为您使用的是小数，所以必须使用

parseFloat（）

有一种说法是过于简洁。将所有逻辑硬塞进一个三元运算符将是一件棘手的事情（但可能）。下面是一个示例，它实现了您想要的功能，额外的行使代码更加清晰：

var carousel = document.getElementById('myCarousel');
window.onload = function() {
    carousel.style.opacity = 0;
    (function fadeIn() {
        var o = parseFloat(carousel.style.opacity);
        (o += .1) > 1 ? o = 1 : setTimeout(fadeIn, 1000)
        carousel.style.opacity = String(o);
    })();
}

也可以考虑使用CSS转换。如此简单，而且不需要超时

/* should be in a stylesheet */

#myCarousel {
    transition:10s;
}


/* should be in a script */

var carousel = document.getElementById('myCarousel');
window.onload = function() {
    carousel.style.opacity = 1;
};

---

我很惊讶它居然能起作用。请记住，样式值是字符串，因此

+=

可能不会达到您的预期效果。尝试将

console.log（carousel.style.opacity+0+0+0）

放入函数中。你很可能会看到那些多余的零

因此，要使其起作用，您必须将字符串转换为数字，因为您使用的是小数，所以必须使用

parseFloat（）

有一种说法是过于简洁。将所有逻辑硬塞进一个三元运算符将是一件棘手的事情（但可能）。下面是一个示例，它实现了您想要的功能，额外的行使代码更加清晰：

var carousel = document.getElementById('myCarousel');
window.onload = function() {
    carousel.style.opacity = 0;
    (function fadeIn() {
        var o = parseFloat(carousel.style.opacity);
        (o += .1) > 1 ? o = 1 : setTimeout(fadeIn, 1000)
        carousel.style.opacity = String(o);
    })();
}

也可以考虑使用CSS转换。如此简单，而且不需要超时

/* should be in a stylesheet */

#myCarousel {
    transition:10s;
}


/* should be in a script */

var carousel = document.getElementById('myCarousel');
window.onload = function() {
    carousel.style.opacity = 1;
};

---

Upvote用于指出正在发生字符串连接而不是添加。Upvote用于指出正在发生字符串连接而不是添加。在设置HTML对象动画时，最好使用CSS或requestAnimationFrame。在设置HTML对象动画时，最好使用CSS或requestAnimationFrame。