[解決済み] jQueryのslideUp, slideDownに相当するCSS3は？

質問

私のアプリケーションは、jQueryのslideDownとslideUpではパフォーマンスが低いです。私は、それをサポートするブラウザでCSS3の同等物を使用することを探しています。

CSS3 の遷移を使用して、要素を display: none; から display: block; というようにスライドさせますか？

どのように解決するのですか？

次のようにすればよいでしょう。

#youritem .fade.in {
    animation-name: fadeIn;
}

#youritem .fade.out {
    animation-name: fadeOut;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(startYposition);
    } 
    100% {
        opacity: 1;
        transform: translateY(endYposition);
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        transform: translateY(startYposition);
    } 
    100% {
        opacity: 0;
        transform: translateY(endYposition);
    }
}

例 - スライドとフェード。

これは、コンテナの高さではなく、トップ/座標に基づいて - 不透明度をスライドさせ、アニメーション化します。 表示例

例 - 自動高さ調整/Javascriptなし。 ここでは、高さを必要としないライブサンプルです - 自動高さとjavascriptなしを処理します。

例を見る