1

私は厳密に CSS(3) を使用して、divクラスに基づいて大小の高さをアニメーション化しようとしています。問題は、コンテンツの量に応じて、より大きな高さが変更される可能性がある/変更されるべきであるということdivです。

これが私の現在のコードです：

 .failure-info{ width:97%; 
    padding:.2em .5em 0 .5em; 
    overflow:hidden; 
    cursor:pointer; 
    -moz-transition-property: height; -moz-transition-duration: .7s;
    -webkit-transition-property: height; -webkit-transition-duration: .7s;
    transition-property: height; transition-duration: .7s; 
 }
.failure-info.height-small{ height:16px; }
.failure-info.height-large{ height:85px; }

.failure-infoこれは、より多くのコンテンツが追加され、インナー html が85px大きなクラスの高さを超える場合を除いて、うまく機能します。コンテンツが追加され、クラスが jquery を介して変更されるため、純粋な CSS で実現できない場合でも、jquery 関数を使用してこれを行うことに反対はありません。ただし、可能であれば CSS のままにしておきたいです。

何か案は？前もって感謝します。

4

1 に答える 1

0

この質問に対して公開された後、（何らかの理由で）削除された回答に従って、必要な結果を得ることができました。コードは次のとおりです。

.failure-info{ width:98%; padding:3px 1% 0 1%; overflow:hidden; cursor:pointer; max-height:16px;
   -moz-transition-property: max-height; -moz-transition-duration: .7s;
   -webkit-transition-property: max-height; -webkit-transition-duration: .7s;
   transition-property: max-height; transition-duration: .7s; 
 }
.failure-info.height-small{ max-height:16px;  }
.failure-info.height-large{ max-height:150px; }

そのため、要素の高さの合計が最終的にどのようなものになるべきかに max-height が比較的近い限り、基本的にトランジション効果には height プロパティではなく max-height プロパティを使用しています (すべての必要な要素が内部に追加されている場合)、アニメーションは適切に時間調整されます。

于 2013-06-19T19:14:53.353 に答える