web-dev-qa-db-ja.com

CSS3トランジションを使用してjQuery slideToggleと同じ効果を得るには？

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

jquerymobilecss
21
sevens

これは、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>
22
dfsq

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

16
TelFiRE

確かに、0と自動高さの間でアニメーション化することはできませんが、実際には最大高さを切り替えることができます。

（JS経由で）max-height:0およびmax-height:1000pxそして、jQueryのslideToggle関数ほど滑らかではありませんが、達成された結果が得られます。

不透明度のフェードと組み合わせると、見栄えがよくなります。大きいコンテナはぎくしゃくしたアニメーションを作成する可能性があるため、このテクニックは比較的短いコンテナでのみ使用することを強くお勧めします。

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

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

私は Animatable がトリックをするべきだと信じています。これはCSS Transitionsフレームワークであり、私はiOS開発をしていませんが、Lea VerouはFFおよびChrome for iOSでテストしていると述べています。

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

0
David Hobs