Question

是否有可能将一个孩子带到其转变后的父母的流动之外？以下简单示例：

HTML：

<div class="parent">
    <div class="child"></div>
</div>
<a href="#" id="button">Move parent</a>

CSS：

.parent {
    background: red;
    height: 200px;
    position: relative;
    transition: 0.5s ease-in-out;
    width: 200px;
}

.child {
    background: black;
    height: 100px;
    left: 0;
    top: 0;
    position: absolute;
    width: 100px;
}

.moved {
    transform: translateX(100px);
}

使用Javascript：

$('#button').on('click', function(e) {
    e.preventDefault();
    console.log('test');
    $('.parent').toggleClass('moved');
});

JSFiddle：http://jsfiddle.net/ous3s873/1/

非常简单的东西。基本上，使用CSS变换将父（红色框）向右移动100px。我想要的输出是孩子（黑匣子）将留在父母移动到它后面的同一个地方。

Answer 1

一个选项是向子元素添加否定translateX，以使其保持原位：

<强> Updated Demo

.moved .child {
    transform: translateX(-100px);
}

在父移动CSS转换后，保持子位置相同

1 个答案: