這個轉換爲什麼不起作用？

<html> 

<head> 
<title>Singularity</title> 

<style> 

body { 
background-color: grey; 
} 

#boxOne { 
position:relative; 
height:150px; 
width:150px; 
background-color: black; 

} 

</style> 
<script> 
    function playOne(){ 
    document.getElementById("boxOne").style.left = "30px"; 
    document.getElementById("boxOne").style.transition = "all 4s"; 
} 
</script> 


</head> 

<body> 
<div id="boxOne" onclick="playOne()"></div> 
</body> 
</html>

上面的代碼在從左到右移動框的情況下工作。我之前成功地使用過style.transition，從左到右緩慢地移動一個圓圈，但這個方塊並不像我試圖去做的那樣。該框不應該立即從左向右移動，它應該按照style.transition腳本中所述的那樣花費4s。不明白我做錯了什麼。這個轉換爲什麼不起作用？

來源

2016-07-31 Ghoyos

不，它的工作和正確的動畫。 https://jsfiddle.net/bx9x8c3y/ – nicael

不，它不會立即從左向右移動。 – Ghoyos

嗯，對不起 - 看起來像它在Safari中，而不是在Chrome中。 – nicael

你也需要設置的值時，在樣式表開始（所有的瀏覽器將不承擔默認值）

function playOne() { 
 
    document.getElementById("boxOne").style.left = "30px"; 
 
    document.getElementById("boxOne").style.transition = "all 4s"; //might be coherent to declare this at first 
 
    //or even straight in the style sheet 
 
}

body { 
 
    background-color: grey; 
 
} 
 
#boxOne { 
 
    position: relative; 
 
    height: 150px; 
 
    width: 150px; 
 
    left: 0; 
 
    /* added this, so calculation can be done from an earlier css value*/ 
 
    background-color: black; 
 
}

<div id="boxOne" onclick="playOne()"></div>

來源

2016-07-31 19:01:03

順便說一句，最初的例子工作在Safari（所以不是所有的瀏覽器）。 – nicael

@nicael這就是我的意思：不會==不會（英語不是我的母語，也沒有研究它，只是拿起它，所以我想我聽起來有趣:) –

GCyrillus我很讚賞！謝謝你現在的作品。現在我明白了爲什麼我能夠在以前工作，我已經開始在其他頁面上的價值。 – Ghoyos

你必須設置一個初始值所以它會正常工作

<head> 
<title>Singularity</title> 

<style> 

body { 
background-color: grey; 
} 

#boxOne { 
position:relative; 
height:150px; 
width:150px; 
background-color: black; 
left:0px; /*value left added*/ 

} 

</style> 
<script> 
    function playOne(){ 
    document.getElementById("boxOne").style.left = "250px"; 
    document.getElementById("boxOne").style.transition = "all 4s"; 
} 
</script> 


</head> 

<body> 
<div id="boxOne" onclick="playOne()"></div> 
</body> 
</html>

來源

2016-07-31 19:04:25

thx oosama，在你做之前有人做出了回答，但你也是對的。我深深地讚賞你的幫助 – Ghoyos

沒問題兄弟:) –

這個轉換爲什麼不起作用？

回答

相關問題