如何使對象與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>

---

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

下面是當你點擊#axis元素，增加了該類.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>

看到這個更新搗鼓箱子移動到中間的一個： 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>