CSS 3トランジションを使用してjQueryのslideToggleと同じ効果を得る方法は？

Question

jQueryのslideToggleエフェクトが必要ですが、iOSデバイスでGPUを呼び出すためにCSS3のトランジションを使用して、トランジションがスムーズになるようにします。

Answer 1

これは、height,padding、border-widthに移行することで実現できます。次に例を示します。

$('.run-css').click(function() { 
 
    $('.cont').toggleClass('toggled'); 
 
});

.cont { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px #CCC solid; 
 
    background-color: #EEE; 
 
    padding: 5px; 
 
    -webkit-transition: height .3s linear, padding-top .3s linear, padding-bottom .3s linear, border-top-width .3s linear, border-top-width .3s linear; 
 
    transition: height .3s linear, padding-top .3s linear, padding-bottom .3s linear, border-top-width .3s linear, border-top-width .3s linear; 
 
} 
 
.toggled { 
 
    overflow: hidden; 
 
    padding-top: 0; 
 
    padding-bottom: 0; 
 
    height: 0; 
 
    border-width: 0 1px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<button class="run-css">CSS slideToggle</button> 
 

 
<div class="cont">Toggle this div</div>

Answer 2

私はAnimatableがすべきことを信じています。これはCSSトランジションのフレームワークですが、iOS開発はしませんが、Lea VerouはFFやChrome for iOSでテストしています。

CSSトランジションとJavaScriptを使用する​​のような、他のCSSアニメーションライブラリがあります。

Answer 3

申し訳ありませんが、あなたは正確な高さを知っている限り、これはCSS3でサポートされていません。 0とautoの間でアニメーション化する方法はありません。正確な高さを知っていれば、ここでいくつかのトランジションコードを生成することができます：http://css3generator.com/

Answer 4

True、実際には最大高さを切り替えることができます。

最大高さ：0と最大高さ：1000pxの間で（JS経由で）切り替え、結果が得られますが、jQueryのslideToggle関数ほど滑らかではありません。

不透明度が弱くなっていて、かなり良く見えます。大きなものではぎこちないアニメーションを作成できるので、比較的短いコンテナでこのテクニックを使用することを強くお勧めします。

Answer 5

.container { 
    overflow-y: hidden; 
    max-height: 0; 

    transition: max-height 0.5s ease; 
} 
.container.open { 
    max-height: 1000px; /* approx */ 
}