CODEWITHSUNDEEP
javascripthtmlcss
Ghoyos
Ghoyos

Reputation: 622

Why isn't this transition working?

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

The above code works as far as the box moving left to right. I've used style.transition successfully before to move a circle slowly from left to right but this box does not behave the way im trying to get it to. The box should not instantly move from left to right, it should take 4s as stated in the style.transition script. Dont understand what im doing wrong.

Upvotes: 4

Views: 71

Answers (2)

Muhammad Osama
Muhammad Osama

Reputation: 9

You have to set a starting a value of left so it will work properly

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

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 105843

you need to set also a value to start from in your style sheet (all browsers won't assume a default value)

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>

Upvotes: 5

Related Questions