文本正在立即消失，而不是随着时间的推移而消失

Text is fading out immediately rather than over time

本文关键字：消失 时间 文本      更新时间：2023-09-26

我试图在动画过程中使用纯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);
    })
})

元素的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

相关文章：