Как перемещать объекты с помощью CSS?

Question

У меня есть два изображения (объекты), установленные бок о бок в середине страницы, и я хочу, чтобы они двигались друг к другу, как будто они собираются столкнуться и остановиться, когда они расположены рядом с каждым.

Итак, для объекта с правой стороны я написал следующий код, считая, что объект должен перемещаться слева направо, но результат далек от того, что я ожидаю. Можно ли это сделать путем перехода? я хочу, чтобы один из объектов начинал двигаться с левой стороны, а другой начинал двигаться справа и встречался в центре, как будто они хотели столкнуться.

.one { 
 
    border: 3px solid #73AD21; 
 
    position: absolute; 
 
} 
 
.two { 
 
    top: 45%; 
 
    left: 44%; 
 
} 
 
.left1, 
 
.right2 { 
 
    float: left; 
 
} 
 
#axis:hover .move-right { 
 
    transform: translate(-350px, 0); 
 
    -webkit-transform: translate(-350px, 0); 
 
    -o-transform: translate(-350px, 0); 
 
    -moz-transform: translate(-350px, 0); 
 
} 
 
.object1 { 
 
    position: absolute; 
 
    transition: all 2s ease-in; 
 
    -webkit-transition: all 2s ease-in; 
 
    -moz-transition: all 2s ease-in; 
 
    -o-transition: all 2s ease-in; 
 
}

<div id="axis" class="one two"> 
 
    <img class="object1 left1 move-right" src="http://placehold.it/50x50" /> 
 
    <img class="object2 right2 move-left" src="http://placehold.it/75x75" /> 
 
</div>

Answer 1

У меня есть два изображения [...] я хочу, чтобы один из объектов начинал двигаться с левой стороны, а другой начинал двигаться с правой стороны и встречался в центре, как будто они хотели столкнуться.

Возможно ли это путем перехода?

Да, это - если я правильно понял ваш вопрос.

Важным соображением с CSS transitions является то, что вы должны явно указать начальное состояние и конечное состояние, поэтому браузер ясно, с чем он переходит.

Итак ... в примере, вы размещаете в вашем вопросе, важно указать translateX положение для изображений при :hover применяется, но и когда :hover не применяется.

Таким образом, в браузере может быть ясно, какие две координаты translateX переходят между ними.

Пример:

#axis { 
 
border: 3px solid #73AD21; 
 
position: absolute; 
 
top: 45%; 
 
left: 44%; 
 
} 
 

 
#axis img { 
 
float: left; 
 
transition: all 1s ease-in; 
 
-webkit-transition: all 1s ease-in; 
 
-moz-transition: all 1s ease-in; 
 
-o-transition: all 1s ease-in; 
 
} 
 

 
#axis .move-left { 
 
transform: translateX(200px); 
 
-webkit-transform: translateX(200px); 
 
-o-transform: translateX(200px); 
 
-moz-transform: translateX(200px); 
 
} 
 

 
#axis .move-right { 
 
transform: translateX(-200px); 
 
-webkit-transform: translateX(-200px); 
 
-o-transform: translateX(-200px); 
 
-moz-transform: translateX(-200px); 
 
} 
 

 

 
#axis:hover .move-left, #axis:hover .move-right { 
 
transform: translateX(0px); 
 
-webkit-transform: translateX(0); 
 
-o-transform: translateX(0); 
 
-moz-transform: translateX(0); 
 
} 
 

 
p { 
 
font-weight:bold; 
 
}

<p>Hover over the green border box.</p> 
 

 
<div id="axis"> 
 
<img class="move-right" src="http://placehold.it/50x50" /> 
 
<img class="move-left" src="http://placehold.it/75x75" /> 
 
</div>

---

Version 2 (перемещение только один раз при загрузке страницы)

function initialiseAxisImages() { 
 
var axis = document.getElementById('axis'); 
 
var axisImages = axis.getElementsByTagName('img'); 
 

 
axisImages[0].classList.remove('move-right'); 
 
axisImages[1].classList.remove('move-left'); 
 
} 
 

 
window.addEventListener('load', initialiseAxisImages, false);

#axis { 
 
border: 3px solid #73AD21; 
 
position: absolute; 
 
top: 45%; 
 
left: 44%; 
 
} 
 

 
#axis img { 
 
float: left; 
 
transition: all 1s ease-in; 
 
-webkit-transition: all 1s ease-in; 
 
-moz-transition: all 1s ease-in; 
 
-o-transition: all 1s ease-in; 
 
} 
 

 
#axis .move-left { 
 
transform: translateX(200px); 
 
-webkit-transform: translateX(200px); 
 
-o-transform: translateX(200px); 
 
-moz-transform: translateX(200px); 
 
} 
 

 
#axis .move-right { 
 
transform: translateX(-200px); 
 
-webkit-transform: translateX(-200px); 
 
-o-transform: translateX(-200px); 
 
-moz-transform: translateX(-200px); 
 
}

<div id="axis"> 
 
<img class="move-right" src="http://placehold.it/50x50" /> 
 
<img class="move-left" src="http://placehold.it/75x75" /> 
 
</div>

Answer 2

Я не силен в JavaScript, поэтому я обычно опираются на Jquery. Если бы я решить ее с JQuery я решить, когда я хотел, чтобы мой анимации, чтобы начать затем использовать этот код, чтобы оживить свой элемент:

$('#axis .move-right').addClass('animate'); 

Вот пример, который добавляет класс .animate при нажатии на #axis элемент ,

//binds an anonymous function to the 'click' event on #axis 
 
$('#axis').on('click',function(){ 
 

 
    //adds your 'animation' class that triggers the CSS animation 
 
    $('#axis .move-right').addClass('animate'); 
 

 
});

.one { 
 
    border: 3px solid #73AD21; 
 
    position: absolute; 
 
} 
 
.two { 
 
    top: 45%; 
 
    left: 44%; 
 
} 
 
.left1, 
 
.right2 { 
 
    float: left; 
 
} 
 
#axis .move-right.animate { 
 
    transform: translate(-350px, 0); 
 
    -webkit-transform: translate(-350px, 0); 
 
    -o-transform: translate(-350px, 0); 
 
    -moz-transform: translate(-350px, 0); 
 
} 
 
.object1 { 
 
    position: absolute; 
 
    transition: all 2s ease-in; 
 
    -webkit-transition: all 2s ease-in; 
 
    -moz-transition: all 2s ease-in; 
 
    -o-transition: all 2s ease-in; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="axis" class="one two"> 
 
    <img class="object1 left1 move-right" src="http://placehold.it/50x50" /> 
 
    <img class="object2 right2 move-left" src="http://placehold.it/75x75" /> 
 
</div>

Смотрите эту обновленную скрипку одну из коробок, двигающихся в середине: https://jsfiddle.net/fuce0x67/

//binds an anonymous function to the 'click' event on #axis 
 
$('#axis').on('click',function(){ 
 

 
    //adds your 'animation' class that triggers the CSS animation 
 
    $('#axis .move-right').addClass('animate'); 
 

 
});

.one { 
 
    border: 3px solid #73AD21; 
 
    position: absolute; 
 
} 
 
.two { 
 
    top: 45%; 
 
    left: 44%; 
 
} 
 
.left1, 
 
.right2 { 
 
    float: left; 
 
} 
 
#axis .move-right { //removed animate class from here. This is now the 'default' (pre-animation) position for this element 
 
    transform: translate(-350px, 0); 
 
    -webkit-transform: translate(-350px, 0); 
 
    -o-transform: translate(-350px, 0); 
 
    -moz-transform: translate(-350px, 0); 
 
} 
 

 
#axis .move-right.animate {//added this block to reset the positions to ~center like I think you want 
 
    transform: translate(-70px, 0); 
 
    -webkit-transform: translate(-70px, 0); 
 
    -o-transform: translate(-70px, 0); 
 
    -moz-transform: translate(-70px, 0); 
 
} 
 

 
.object1 { 
 
    position: absolute; 
 
    transition: all 2s ease-in; 
 
    -webkit-transition: all 2s ease-in; 
 
    -moz-transition: all 2s ease-in; 
 
    -o-transition: all 2s ease-in; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="axis" class="one two"> 
 
    <img class="object1 left1 move-right" src="http://placehold.it/50x50" /> 
 
    <img class="object2 right2 move-left" src="http://placehold.it/75x75" /> 
 
</div> 
 

 
<p> 
 
click on the box in the center to activate animation 
 
</p>