1

css3でフェードアウトトランジションを作ろうとしたのですが、トランジションでディスプレイが動かないことがわかりました。

タイトル<div id=groupID>付きのグループオブジェクトがあり、グループクラスを非表示にするonclickイベントがバインドされています。私は表示の問題を克服しようとしましたが、これは問題なく動作しますが、<h2><div class='group'><h2>{opacity: 0; height: 0; overflow: hidden;}{display:none}

CSS

transition: all 2s ;
-webkit-transition: height 2s ease-out;
transition: opacity 2s ease-out ;
display: block;
-webkit-transition: opacity 2s ease-out;

JS

//collapse function
block.setStyle({opacity: 0});
block.setStyle({height: 0});

//expand function
block.setStyle({opacity: 1});
block.setStyle({height: 'auto'});

閉じるときにアニメーションを実行しませんが、再表示するとフェードインします。あっという間に消えるだけです。

はい、CSS3で必要です。いいえ、jQuery は使用できません

何か案が?

ありがとう

4

1 に答える 1

3

との間で移行autoしようとしないでください。うまくいきません。

JavaScript を使用して要素のピクセル単位の高さを計算し、それをblock.setStyle()呼び出しで使用できる場合があります。

于 2012-07-03T13:18:39.230 に答える