Question

我希望使用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)
    })();
}

超时功能正在运行，但我不明白为什么元素在达到1时不保持不透明度。

Answer 1

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);
    })();
};

演示：http://jsbin.com/xowasiyoti/2/

Answer 2

因为CSS属性在内部存储为字符串，所以在这种情况下，+ =将.1作为字符串附加。

这就是为什么第一个增量有效：＆＃39; 0＆＃39; +＆＃39; .1＆＃39; ===＆＃39; 0.1＆＃39;，但后续增量无效且被忽略（＆＃39; 0.1＆＃39; +＆＃39; .1＆＃39; ===＆＃39; 0.1。 1＆＃39;。）

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

＆＃13;

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

＆＃13;

#myCarousel {
  background-color: #ff0000;
  height: 100px;
  width: 100px;
}

＆＃13;

<div id="myCarousel"></div>

＆＃13;

Answer 3

我很惊讶它的工作。请记住样式值是字符串，因此+=可能无法达到预期效果。尝试将console.log(carousel.style.opacity + 0 + 0 + 0)放入函数中。你很可能会看到那些多余的零。

因此，为了实现这一点，您必须将字符串转换为数字，并且因为您使用了小数，所以您必须使用parseFloat()。

有这么简洁的事情。将所有逻辑分解为单个三元运算符将会很棘手（但可能）。这是一个可以帮助您寻找所需内容的示例，其中额外的行使代码更加清晰IMO：

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;
};

Answer 4

为什么用JS计算一切。 CSS可能是你的回答;）

＆＃13;

var test = document.getElementById("test");
function toggle() {
  test.classList.toggle('fadeIn');
}

＆＃13;

#test {
  -webkit-transition: 1s opacity;
  transition: 1s opacity;
  opacity: 1;
}
#test.fadeIn {
  opacity: 0; 
}

＆＃13;

<div id="test">
  Text
</div>
<button onclick="toggle()">Toggle fade</button>

＆＃13;

Vanilla js fadeIn动画不起作用

4 个答案: