如何让物体随 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

我不强javascript，所以一般偏向jQuery。如果我用 jQuery 解决它，我会决定何时开始我的动画，然后使用此代码为我的元素设置动画：

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

这是一个示例，当您单击 #axis 元素时添加 class .animate。

//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>

请参阅更新后的 fiddle，其中一个盒子移到了中间： 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>

Answer 2

I have two images [...] what I want is that one of the objects start moving from left side and the other start moving from the right and meet at the center as if they want to collide.

Is it possible to do it by transition?

是的 - 如果我没有正确理解你的问题。

CSS transitions 的一个重要考虑是您应该显式设置开始状态和结束状态，以便浏览器清楚它在什么之间转换。

所以...在您 post 的示例中，重要的是在 :hover 适用时说明图像的 translateX 位置，但是当 :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>

版本 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>

如何让物体随 CSS 移动？

How to make objects move with CSS?

html

css

css-transforms

版本 2（页面加载时仅移动一次）