0

フェードアウトして自分自身を削除するようにこれを変更するにはどうすればよいですか?

<script>
 close = document.getElementById("close");
 close.addEventListener('click', function() {
   preloader = document.getElementById("preloader");
   preloader.style.display = 'none';     <--- this part, obviously
 }, false);
</script>

クリックすると、「display:none」が不快/滑らかに感じられません。ありがとう！

4

1 に答える 1

1

サポートする必要があるブラウザーによって異なりますが、css-transitions を使用してそれを行うことができます。

.fadeOut{
    opacity: 0;
    -webkit-transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
    transition: opacity .5s ease-out;
}

-class を要素に追加するだけです。.fadeOutトランジションの詳細については、MDN の記事を参照してください。互換性のあるブラウザーのリストは、 caniuse.comで確認できます。

それ以外に、jQuery のようなライブラリには組み込みの fadeIn/fadeOut エフェクトがあり、これらは JavaScript を使用して実装されているだけで、そこにあるすべての主要なブラウザーと互換性があります。( jQuery API -> フェードアウト)

jQuery を使用せずにこれを行いたい場合は、ソースコードで直接実装する方法を確認できます。jsapi.infoは優れたコード ブラウザーであり、使用されている内部関数をリンクし、呼び出された関数と呼び出された関数がどのように見えるかをすばやく確認する機会を提供します。

編集：

さらに、Codereview.SE に関する次のような質問に出くわしました: Fade In Fade Out in pure JavaScript

于 2012-12-13T01:22:14.297 に答える