4

animateプロパティでCSStransitionを使用してページ要素を作成しようとしていopacityます。フェードアウトは正常に機能しますが、フェードインは機能しません。私は何を間違っていますか？

いくつかの事実は本当に奇妙です:

  • .no-displayクラスを使用しなくても、すべてが期待どおりに機能します（ただし、使用する必要があります）。
  • ブラウザ コンソールで関数のコマンドを再生すると、期待どおりに動作します(ただし、関数は動作しません)。

コード：

HTML

<p><a href="javascript:fadeIn()">Fade in</a></p>
<p><a href="javascript:fadeOut()">Fade out</a></p>
<div class="no-display invisible" id="square"></div>

CSS

.no-display {
    display: none;
}

.invisible {
    opacity: 0;
}

#square {
    width: 500px;
    height: 500px;
    background-color: red;
    border: 1px solid black;

    -webkit-transition: opacity 2s ease;
    -moz-transition: opacity 2s ease;
    -ms-transition: opacity 2s ease;
    -o-transition: opacity 2s ease;
    transition: opacity 2s ease;
}

JavaScript

function fadeIn() {
    square.classList.remove("no-display");
    square.classList.remove("invisible");
}

function fadeOut() { 
    square.classList.add("invisible");
    setTimeout(function() { square.classList.add("no-display"); }, 2000 );
}

または: http://jsfiddle.net/V2Sar/6/。

jQuery などのフレームワークは使用できないことに注意してください。純粋な JavaScript だけで作業する必要があります。

4

2 に答える 2

2

JS で CSS トランジションをトリガーする簡単な方法は、クラス名を切り替えることです。これを行う簡単な方法は、classList APIを使用することです。

js

var square = document.getElementById("square");
function fadeIn() {
    square.classList.remove("invisible");
}

function fadeOut() { 
    square.classList.add("invisible");
}

CSS

#square {
    opacity: 1;
    transition: opacity 2s ease;
}
#square.invisible {
    opacity: 0;
}

http://jsfiddle.net/V2Sar/5/

<body>また、 DOM がまだ構築されているかどうかを心配する必要がないように、スクリプトが最後にあることを確認してください(このための jsfiddle の別のオプション)。

ブラウザーのサポートは良くありません (IE9 ではサポートされていません) が、https://github.com/eligrey/classList.jsで利用できる shim があります。

これで十分でない場合はお知らせください。代替案もいくつか投稿します。

于 2013-06-28T09:17:36.000 に答える