setIntervalをフェードインしてから純粋なjavascriptをフェードアウトするjqueryまたはcssを使用しない

Question

データが変更された場合にボタンのクリックで実行されるフェードイン/フェードアウト機能を実装しようとしています。私は角度を使用していますが、ngAnimateは動作しませんでしたので、私は純粋なjsでそれをしたいです。私が現在持っているものは、テキストを1秒間点滅させ、何もしません。これは私のコントローラーの中にあります。

var warningText = document.getElementById('warningText'); 
warningText.style.display = 'inline' 
$scope.warningText = "Warning: No Data was updated."; 
var op = 0.0; 
var fadeIn = setInterval(function() { 
    if (op >= 1) { 
     clearInterval(fadeIn); 
     fadeOut(op); 
    } 
    warningText.style.opacity = op; 
    op += op * 0.1; 
}, 50); 
var fadeOut = function(op) { 
    setInterval(function() { 
     if (op <= 0.1) { 
      clearInterval(fadeOut); 
      warningText.style.display = 'none'; 
     } 
     warningText.style.opacity = op; 
     op -= op * 0.1; 
    }, 50); 
} 

Answer 1

opの計算は常にゼロになるので間違っています。第2に、第2の関数はsetIntervalから値を戻さないため、その間隔をクリアすることはできません。ここで

はあなたが不透明に増分の符号が境界値に達するたびに逆転されてちょうど1時間間隔、でそれを行うことができる方法である：

var warningText = document.getElementById('warningText'); 
 

 
function flickerMessage(msg) { 
 
    var op = 0.1; 
 
    var increment = +0.1; 
 
    warningText.textContent = msg; 
 
    warningText.style.opacity = 0; 
 
    warningText.style.display = 'inline'; 
 

 
    var timer = setInterval(function() { 
 
     op += increment; 
 
     warningText.style.opacity = op; 
 
     if (op >= 1) increment = -increment; 
 
     if (op <= 0) { 
 
      warningText.style.display = 'none'; 
 
      clearInterval(timer); // end 
 
     } 
 
    }, 50); 
 
} 
 

 
flickerMessage('Warning you');

<div id="warningText" style="display:none; opacity: 0">warning text</div> 
 
<hr>