logo标签列表

CSS 变换与固定元素冲突

htmlcsscss-transforms
3

关于此主题的后续

当我将css transform应用于父元素时，子元素不再固定。

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

尝试只使用一个方向的transform但没有成功。

如果您删除transform: translate(0%,0px);，一切都正常运行，但从之前的主题中您会理解到，我需要这个动画。

1个回答
2

您的意思是“按钮”应该保持不动吗？如果是这样，您需要将变换应用于容器元素，因为 body（您应该考虑将此 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上。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接