web-dev-qa-db-ja.com

JavaScriptでフェードアウト効果のあるdivを削除するにはどうすればよいですか？

クリックイベントでdiv要素を削除したいのですが、フェードアウト効果でそれを削除したいと思います。私はいくつかのJQueryソリューションを持っていますが、純粋なJavaScriptまたはCSSソリューションが必要です。

document.querySelector('.list').addEventListener("click", function(e){
    if (e.target.localName === "span") {
        var removeTarget = e.target.parentNode.parentNode;
        removeTarget.parentNode.removeChild(removeTarget);
    };
});

このコードは、影響を与えずにdiv要素を削除しています。フェードアウト効果を追加するにはどうすればよいですか？

javascripthtmlcssanimationfade
9
PariSh KhAn

これを実現するには、CSS3アニメーションまたはjQueryアニメーションの2つの方法があります。

CSS3アニメーション

  1. CSSドキュメントに次を追加します。

    .list {
    opacity: 1;
    -webkit-transition: opacity 1000ms linear;
    transition: opacity 1000ms linear;
}
    • これにより、アイテムの不透明度の変更が1000msずつフェードします。

  2. JavaScriptの4行目を次のように変更します。

    removeTarget.style.opacity = '0';
setTimeout(function(){removeTarget.parentNode.removeChild(removeTarget);}, 1000);
    • これにより、アイテムの不透明度が0に変更されるため、手順1からの移行が有効になります。次に、1000ミリ秒後にコードでアイテムを削除します。

注：CSS3遷移の時間とsetTimeoutが同じであることを確認してください。

jQueryアニメーション

  1. JQueryを取得する

    • jQuery Website にアクセスしてダウンロードするか、
    • HTMLドキュメントでjQueryコードの前に `を追加します。

  2. JavaScriptの4行目を次のように変更します。

    removeTarget.fadeOut(1000)
    • これにより、アイテムが1000msフェードアウトします。この時間を好きなように変更できます。
13
Jaketr00

私は個人的なプロジェクトのためにこの関数を少し前に作りました：

function removeFadeOut( el, speed ) {
    var seconds = speed/1000;
    el.style.transition = "opacity "+seconds+"s ease";

    el.style.opacity = 0;
    setTimeout(function() {
        el.parentNode.removeChild(el);
    }, speed);
}

removeFadeOut(document.getElementById('test'), 2000);
8
alvarodms

良い質問ですが、htmlの一部の要素をアニメーション化するには、アニメーション化している間、この要素が存在している必要があります。したがって、これを行うにはいくつかの方法があります。CSSでこの要素を非表示にし、アニメーションの後にこの要素を削除するのが良い方法です。非表示にするとアニメーションを表示できますが、次の例を確認できます。

<style>
  .hide{
    opacity: 0; 
   }
  .fade-out {
    transition:1s linear all;
  }
</style>
<span class="list fade-out">

  This is a List, click me to hide

</span>

<script>
  document.querySelector('.list').addEventListener("click", function(e) {
    
    if (e.target.localName === "span") {
      
      //Add CSS hide and animate with fade out
      var currentCSS = this.className;
      this.className = currentCSS + ' hide';
      
      var removeTarget = e.target.parentNode.parentNode;
      setTimeout(function(){
        removeTarget.parentNode.removeChild(removeTarget);
        },1000);
    };
  });
</script>
0
Túlio Castro

Elem.className = "my-animation";を使用して、次のCSSクラスを要素に追加します。クリック時：

.my-animation {
  animation: fade 3s steps(90) forwards;
 -webkit-animation: fade 3s steps(90) forwards;
  -moz-animation: fade 3s steps(90) forwards;
}

@keyframes fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.0;
  }
}

同様に、steps（number）を変更することで、アニメーションの速度を制御できます。

0
Anne Bione

単に jQuery ソースコードに移動し、純粋なJavaScriptにあるfadeコードを取り出して、それを使用します。ホイールを再発明する必要はありません。

または、ヒントはsetTimeInterval()を使用してdivの高さをゆっくり0に減らします

またはCSSソリューションはtransformとtransitionプロパティを使用することです

0
vinayakj