web-dev-qa-db-ja.com

純粋なJavaScriptでfadeOutエフェクトを作成する方法

pure JavaScriptでdivのfadeOutエフェクトを作成しようとしています。

これは私が現在使用しているものです：

//Imagine I want to fadeOut an element with id = "target"
function fadeOutEffect()
{
 var fadeTarget = document.getElementById("target");
 var fadeEffect = setInterval(function() {
  if (fadeTarget.style.opacity < 0.1)
  {
   clearInterval(fadeEffect);
  }
  else
  {
   fadeTarget.style.opacity -= 0.1;
  }
 }, 200);
}

Divはスムーズにフェードアウトするはずですが、すぐに消えます。

どうしましたか？どうすれば解決できますか？

jsbin

javascriptfadeout
24
Anakin

最初に不透明度が設定されていない場合、値は空の文字列になり、算術演算が失敗します。あれは、 "" < 0.1 == trueそして、コードはclearIntervalブランチに入ります。

デフォルトの1に設定すると、機能します。

function fadeOutEffect() {
    var fadeTarget = document.getElementById("target");
    var fadeEffect = setInterval(function () {
        if (!fadeTarget.style.opacity) {
            fadeTarget.style.opacity = 1;
        }
        if (fadeTarget.style.opacity > 0) {
            fadeTarget.style.opacity -= 0.1;
        } else {
            clearInterval(fadeEffect);
        }
    }, 200);
}

document.getElementById("target").addEventListener('click', fadeOutEffect);
#target {
    height: 100px;
    background-color: red;
}
<div id="target">Click to fade</div>

空の文字列は、算術と比較を行うときにJavaScriptによって0として扱われているように見えます（CSSではその空の文字列を完全な不透明度として扱いますが）

> '' < 0.1
> true

> '' > 0.1
> false


> '' - 0.1
> -0.1
36
Juan Mendes

ちょうど今朝、私は http://Vanilla-js.com でこのコードを見つけました。非常にシンプルでコンパクトで高速です。

var s = document.getElementById('thing').style;
s.opacity = 1;
(function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,40)})();

setTimeOut関数の2番目のパラメーターを変更して、フェードの速度を変更できます。

var s = document.getElementById('thing').style;
s.opacity = 1;
(function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,40)})();
#thing {
  background: red;
  line-height: 40px;
}
<div id="thing">I will fade...</div>
14
Lucas Ferreira

javaScriptでvaiタイマーを実行するのではなく、CSS遷移プロパティを使用できます。それはあなたがやっていることと比較してパフォーマンス指向です。

チェック

http://fvsch.com/code/transition-fade/test5.html#test

4
Vikash

別の方法でもできるようです（間違っているかもしれません）。

event.target.style.transition = '0.8s';
event.target.style.opacity = 0;
1
Alexander Tarasenko
    var op = 1;
    var element = document.getElementById('exitModal');
    function closeModal() {
        window.setInterval(function(){
            element.style.opacity = op;
            op = op - 0.01;
        },10);
0
Guryash Singh