html - 固定要素との CSS 変換の競合

Question

このトピックのフォローアップ

親要素に css 変換を適用すると、子要素が固定されなくなります。

http://jsfiddle.net/z8fBD/7/

一方向変換のみを使用してみましたが、成功しませんでした。

すべてを削除transform: translate(0%,0px);すると問題なく動作しますが、前のトピックからわかるように、アニメーションにはこれが必要です

Answer 1

移動の「ボタン」はそのままにしておくべきということですか? その場合、本体 (この div の名前を変更することを検討する必要があります) がすべての子を変換するため、コンテナー要素に変換を適用する必要があります。これを行うための変更は次のとおりです。

JS:

jQuery(document).ready(function($){
    $('#move').click(function(){
        if(!$('#container').hasClass('move')){
            $('#container').addClass('move');
        } else {
            $('#container').removeClass('move');
        }
    })
})

CSS:

#body {
    position:absolute;
    left: 0;
    top:0;
    width: 200px;
}
#container {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-transform: translate(0%,0px);
    -moz-transform: translate(0%,0px);
    -ms-transform: translate(0%,0px);
    -o-transform: translate(0%,0px);
    transform: translate(0%,0px);
}
#container.move {
    -webkit-transform: translate(150%,0px);
    -moz-transform: translate(150%,0px);
    -ms-transform: translate(150%,0px);
    -o-transform: translate(150%,0px);
    transform: translate(150%,0px);

CSS の残りの部分は同じままです。body にあったスタイルが #container に移動されたことに注意してください。