BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] 純粋なJavaScriptでfadeOut効果を作る方法

2022-03-07 07:42:17

質問

のフェードアウト効果を作りたいのですが、どうすればいいですか？ div で ピュアJavaScript .

現在使っているのはこれです。 

//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

解決方法は？

不透明度が設定されていない初期状態では、値が空文字列になってしまい、演算が失敗してしまいます。つまり "" < 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

よりシンプルなアプローチ これで CSSトランジション を使えば、より少ないコードでフェードアウトさせることができます。 

const target = document.getElementById("target");

target.addEventListener('click', () => target.style.opacity = '0');
// If you want to remove it from the page after the fadeout
target.addEventListener('transitionend', () => target.remove());

#target {
    height: 100px;
    background-color: red;
    transition: opacity 1s;
}

<p>Some text before<p>
<div id="target">Click to fade</div>
<p>Some text after</p>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します