Перемещение родительского DIV без влияния на дочерние DIVs

Question

У меня есть DIV и некоторые DIV внутри него, с атрибутом «position: absolute». Размеры и координаты всех элементов известны и исправлены. Мне нужно переместить родительский DIV, но пользователь должен подумать, что все дочерние DIVs визуально остались на своих старых местах.

Это кажется легким, но координаты всех внутренних DIV тоже должны быть изменены, и именно на расстоянии от движения родительского DIV (расстояние известно, например, 20px).

Я попытался изменить CSS родительского DIV и в цикле изменить координаты всех дочерних элементов, но он выглядит не очень хорошо - я все еще вижу, как движутся дочерние элементы (движение происходит быстро, но не невидимый). Я бы хотел, чтобы одним простым действием было перемещение родительского DIV, но все внутри DIVs автоматически меняли свои позиции, и никто не мог этого заметить. Как я могу это сделать? Производительность важна.

Пример кода:

<div id="parent" style="position:absolute; top:50px; left:100px; width:500px; height:300px;"> 
    <div id="child1" style="position:absolute; top:10px; left:15px; width:20px; height:20px;"></div> 
    <div id="child2" style="position:absolute; top:10px; left:55px; width:20px; height:20px;"></div> 
</div> 

Answer 1

Вы можете достичь этого для любого произвольного элемента (то есть, не зная его стартовой позиции, количества детей или стартовых позиций детей), вы хотите, чтобы моя функция CSS translateXtransform - сдвинуть родителя вправо на заданный количество пикселей, а затем использовать отрицательное значение этого числа, чтобы сдвинуть оставшиеся дети, при условии, что они являются статическими.

Я привел несколько примеров ниже, первые 2 запускаются событием JavaScript (для простоты оба они запускаются нажатием одной кнопки), причем первый из них просто «прыгает» через а второй - transition для анимации, второй - с использованием действий мыши в CSS, первый из которых - на :hover, а второй - на :focus.

Here's a Fiddle если вы хотите поиграть с ним.

ОБНОВЛЕНИЕ:Here's another Fiddle с родителем, перемещающимся слева при каждом нажатии кнопки.

document.getElementById("button").addEventListener("click",function(event){ 
 
    var divs=document.querySelectorAll(".event"),x=divs.length; 
 
    while(x--) 
 
     divs[x].classList.toggle("shift"); 
 
    event.preventDefault(); 
 
},0);

/** PARENTS **/ 
 
.move{ 
 
    border:2px solid #000; 
 
    height:70px; 
 
    padding:40px 10px 10px; 
 
    position:absolute; 
 
    width:250px; 
 
} 
 
.move:first-of-type{left:20px;top:50px;} 
 
.move:nth-of-type(2){left:30px;top:130px;} 
 
.move:nth-of-type(3){left:40px;top:210px;} 
 
.move:nth-of-type(4){left:50px;top:290px;} 
 
/** CHILDREN **/ 
 
.move>div{ 
 
    background:#000; 
 
    height:20px; 
 
    position:absolute; 
 
    top:10px; 
 
    width:20px; 
 
} 
 
.move>div:first-child{left:15px;} 
 
.move>div:nth-child(2){left:45px;} 
 
.move>div:nth-child(3){left:75px;} 
 
.move>div:nth-child(4){left:105px;} 
 
/** ANIMATION **/ 
 
.animate,.animate>div{ 
 
    transition:transform .5s linear; 
 
} 
 
/** TRANSFORMATION **/ 
 
.shift,.hover:hover,.focus:focus{ 
 
    transform:translateX(100px); 
 
} 
 
.shift>div,.hover:hover>div,.focus:focus>div{ 
 
    transform:translateX(-100px); 
 
} 
 
/** MISC **/ 
 
button{ 
 
    top:10px; 
 
    left:10px; 
 
    position:relative; 
 
} 
 
*{box-sizing:border-box;line-height:20px;margin:0;outline:0;}

<button id="button">Click Me</button> 
 
<div class="move event"> 
 
    <div></div> 
 
    <p>I just jump across</p> 
 
</div> 
 
<div class="move event animate"> 
 
    <div></div> 
 
    <div></div> 
 
    <p>I transition across</p> 
 
</div> 
 
<div class="move hover animate"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <p>Hover over me</p> 
 
</div> 
 
<div class="move focus animate" tabindex="-1"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <p>Click on me</p> 
 
</div>

Answer 2

использование попробовать CSS position: relative в своих дочерних элементов? и использовать процент по ширине и высоте.