CSSアニメーションでHTML要素が消えるようにする

CSSのアニメーションでHTML要素を消す方法があるかどうかを知りたい。したがって、あるスクリプトによって要素がページから削除されると、その要素が実際に削除される前にアニメーションが表示されます。CSSアニメーションでHTML要素が消えるようにする

これは簡単な方法ですか？または、時間をXにしてアニメーションを開始し、時間X後に要素を削除するスクリプトにタイマーを設定する必要がありますか？

出典

2016-09-15 Froxx

これはhttp://stackoverflow.com/questions/15907079/css3-transition-fade-out-effectを助けることができるそれを再現するために必要な最短のコードが含まれている必要があり、コードの助けを求める – jakob

質問**質問そのもの** **好ましくは[** Stack Snippet **]（https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/））。 [**最小限の完全で検証可能なサンプルを作成する方法**]（http://stackoverflow.com/help/mcve） –

これは、あなたが行っている効果と要素の除去方法に完全に依存します除去後に他の要素に影響を与えると考えられています。 –

スクリプトが実際にDOM要素を削除している場合、私はそれをフェードアウトする方法はないと思います。私はタイマーがあなたの唯一の選択肢だと思う。このような

出典

2016-09-15 14:30:53 sean

あなたは正しいようです。さて、タイムアウトの方法は、とにかくそれほど悪くはありません。私はちょうどJSなしで簡単な方法があるかどうか疑問に思った。 – Froxx

使用遷移：

function waithide() 
 
{ 
 
    var obj = document.getElementById("thisone"); 
 
    obj.style.opacity = '0'; 
 
    window.setTimeout(
 
    function removethis() 
 
    { 
 
     obj.style.display='none'; 
 
    }, 300); 
 
}

div 
 
{ 
 
    height:100px; 
 
    width :100px; 
 
    background:red; 
 
    display:block; 
 
    opacity:1; 
 
    transition : all .3s; 
 
    -wekit-transition : all .3s; 
 
    -moz-transition : all .3s; 
 
}

<div id="thisone" onclick="waithide()"></div>

出典

2016-09-15 14:31:47 QApps

これはうまくいくはずです – QApps

アニメーションは確かに動作しますが、それは私が求めたものではありません。私は要素を削除するときにCSSアニメーションを再生することができるかどうかを尋ねました。要素を隠す方法ではありません（それはまだ終わりです）。 – Froxx

@Froxxこれは間違いなく素晴らしい作品です – QApps

私は二つのステップでそれをしなければならないと思います。まずアニメート。次に、アニメーションが完了したら、elemを削除します。以下の関数を参照してください。おそらくそれはjqueryのプラグインに置くことができますか？

<style> 
    #test{ 
     background: red; 
     height: 100px; 
     width: 400px; 
     transition: height 1s; 
    } 

    #test.hide { 
     height: 0;  
    } 

</style> 

<div id="test"> </div> 

<button>Hide the Div</button> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js"></script> 
<script> 


     $('button').click(function(){ 
      removeWithAnimate('#test'); 
     }); 


     function removeWithAnimate(id){ 
      $(id).addClass('hide'); 
      setTimeout(function(){ 
        $(id).remove() 
      },1000);; 
     } 

</script>

出典

2016-09-15 14:35:58

要素がDOMに残っている可能性がありますが、そうでない場合はいい解決策になります。私はそれを削除する必要がありますが、ありがとう。 – Froxx

私は、キーフレーム

@keyframes myAnimation{ 
0%{ 
    opacity: 1; 
    transform: : rotateX(90deg); 
} 
50%{ 
    opacity: 0.5; 
    transform: : rotateX(0deg); 
} 
100%{ 
    display: none; 
    opacity: 0; 
    transform: rotateX(90deg); 
} 
} 
#myelement{ 
animation-name: myAnimation; 
animation-duration: 2000ms; 
animation-fill-mode: forwards;

}私はこれを実装するためのjQueryを使用し

出典

2016-09-15 14:41:01 Buffalo

で空想になるだろう。

//jQuery 
 
$(document).ready(function() { 
 
    var target = $("#div"); 
 
    $("#btn").click(function() { 
 
    removeElement(target); 
 
    }); 
 
}); 
 

 
function removeElement(target) { 
 
    target.animate({ 
 
    opacity: "-=1" 
 
    }, 1000, function() { 
 
    target.remove(); 
 
    }); 
 
}

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: #000; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id="div"></div> 
 
    <input type="button" value="fadeout" id="btn"> 
 
</body> 
 

 
</html>

出典

2016-09-15 15:32:21 Tim

CSSアニメーションでHTML要素が消えるようにする

答えて

関連する問題