如何使用CSS移动对象？

Question

我在页面中间并排设置了两个图像（对象），我希望它们相互移动，就好像它们会碰撞并停在它们旁边一样。

因此，对于右侧的对象，我编写了以下代码，认为对象应该从左向右移动，但结果远非我的预期。是否可以通过过渡来实现？我想要的是其中一个物体从左侧开始移动而另一个从右侧开始移动并在中心相遇，就好像它们想要碰撞一样。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

  

我有两个图像[...]我想要的是其中一个对象从左侧开始移动而另一个从右侧开始移动并在中心相遇，就好像它们想要碰撞一样。

     

是否可以通过转换来实现？

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

CSS transitions的一个重要考虑因素是您应该明确设置开始状态和结束状态，这样浏览器就可以清楚地了解它之间的转换。

所以......在您在问题中发布的示例中，在translateX适用时，还要来说明图片的:hover位置非常重要>当:hover不适用时。

这样，浏览器可以清楚它正在转换的两个translateX坐标。

示例：

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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);

＆＃13;

#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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我在javascript方面不强，所以我一般都依赖于jQuery。 如果我用jQuery解决它，我决定何时开始动画，然后使用此代码为我的元素设置动画：

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

以下是点击.animate元素时添加课程#axis的示例。

＆＃13;

＆＃13;

//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');

});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

看到这个更新的小提琴，其中一个盒子移动到中间： https://jsfiddle.net/fuce0x67/

＆＃13;

＆＃13;

//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');

});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;