Question

当我将css变换应用于父元素时，子元素不再被修复。

尝试过只使用一个方向转换，但没有成功。

当您删除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的其余部分保持不变。请注意身体上的样式如何移动到#container。

CSS转换与固定元素的冲突

1 个答案: