テキストは時間の経過ではなく直ちにフェードアウトします

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; 

...それは、このやっと同じです：原因JavaScriptは型変換を処理する方法に

scrollingTextElement.style.opacity = '' - 0.1; 

を、'' - 0.1が-0.1なり、したがって、最初の時間は、このラインが呼び出される

要素を直ちに消滅させる。

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

Fiddle

：

これを解決するには、このような要素の不透明度の真の値を取得するためにWindow.getComputedStyle()を使用することができます