Question

我试图在动画期间使用纯Javascript淡出文本。但是，我的脚本不是这样做的，而是立刻淡出它。任何人都可以解释为什么会发生这种情况以及如何在不使用jQuery的情况下修复它？的 HTML

<div id="scrollingTextHolder">
    <p id="scrollingText">Hello</p>
    <button id="moveText">Move Text</button>
</div>

CSS

#scrollingText{
    display: block;
    margin-top: 25px;
    color: black;
}

JS

window.addEventListener("load", function(){
    var scrollSpeed = window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        function(callback){
            window.setTimeout(callback, 1000 / 60)
        };

    var moveText = document.getElementById("moveText");
    function animateText(){
        var scrollingTextElement = document.getElementById("scrollingText");
        var currentPosition = parseInt(window.getComputedStyle(scrollingTextElement).getPropertyValue("margin-top"));
        var moveTo = 247;
        scrollingTextElement.style.opacity = scrollingTextElement.style.opacity - 0.1;
        console.log(scrollingTextElement.style.opacity);
        if(currentPosition <= moveTo){
            scrollingTextElement.style.marginTop = (currentPosition + 3) +"px";
        }

        if(currentPosition == moveTo){
            cancelAnimationFrame(requestAnimationFrame(animateText));
        }
        requestAnimationFrame(animateText);
    }
    moveText.addEventListener("click", function(){
        requestAnimationFrame(animateText);
    })
})

Answer 1

元素的style属性返回一个空字符串，除非以前使用JavaScript设置了样式，或者它是内联设置的。

因此，第一次调用此行：

scrollingTextElement.style.opacity = scrollingTextElement.style.opacity - 0.1;

......它和这样做是一样的：

scrollingTextElement.style.opacity = '' - 0.1;

由于JavaScript处理类型转换的方式，'' - 0.1变为-0.1，这会使元素立即消失。

要解决此问题，您可以使用 Window.getComputedStyle() 来获取元素不透明度的真实值，如下所示：

scrollingTextElement.style.opacity = 
  getComputedStyle(scrollingTextElement).getPropertyValue('opacity') - 0.1;

Fiddle

文本会立即淡出，而不是随着时间的推移

1 个答案: