CSS transition doesn't work when javascript added properties continuous
2
Below is a simplified version of a problem I am having with my website.
function move(){
document.getElementById("box").style.transition = "0s";
document.getElementById("box").style.top = "100px";
document.getElementById("box").style.transition = "2s";
document.getElementById("box").style.top = "0px";
}#box{
width:100px;
height:100px;
background:red;
position:relative;
top:0px;
}<div id="box" onclick="move()"></div>What I want it to do is make the box instantaneously jump downwards, and then slowly move back to its starting position. I have tested each of the four lines of code inside move() separately and they work perfect. I just can't get them to run in one go.
What am I doing wrong?
javascript html css animation transition
edited Nov 18 '18 at 14:46
Mohammad
15.6k123461
asked Nov 18 '18 at 14:25
Jonathon Philip ChambersJonathon Philip Chambers
15313
add a comment |
2
Below is a simplified version of a problem I am having with my website.
function move(){
document.getElementById("box").style.transition = "0s";
document.getElementById("box").style.top = "100px";
document.getElementById("box").style.transition = "2s";
document.getElementById("box").style.top = "0px";
}#box{
width:100px;
height:100px;
background:red;
position:relative;
top:0px;
}<div id="box" onclick="move()"></div>What I want it to do is make the box instantaneously jump downwards, and then slowly move back to its starting position. I have tested each of the four lines of code inside move() separately and they work perfect. I just can't get them to run in one go.
What am I doing wrong?
javascript html css animation transition
edited Nov 18 '18 at 14:46
Mohammad
15.6k123461
asked Nov 18 '18 at 14:25
Jonathon Philip ChambersJonathon Philip Chambers
15313
add a comment |
2
2
2
Below is a simplified version of a problem I am having with my website.
function move(){
document.getElementById("box").style.transition = "0s";
document.getElementById("box").style.top = "100px";
document.getElementById("box").style.transition = "2s";
document.getElementById("box").style.top = "0px";
}#box{
width:100px;
height:100px;
background:red;
position:relative;
top:0px;
}<div id="box" onclick="move()"></div>What I want it to do is make the box instantaneously jump downwards, and then slowly move back to its starting position. I have tested each of the four lines of code inside move() separately and they work perfect. I just can't get them to run in one go.
What am I doing wrong?
javascript html css animation transition
edited Nov 18 '18 at 14:46
Mohammad
15.6k123461
asked Nov 18 '18 at 14:25
Jonathon Philip ChambersJonathon Philip Chambers
15313
Below is a simplified version of a problem I am having with my website.
function move(){
document.getElementById("box").style.transition = "0s";
document.getElementById("box").style.top = "100px";
document.getElementById("box").style.transition = "2s";
document.getElementById("box").style.top = "0px";
}#box{
width:100px;
height:100px;
background:red;
position:relative;
top:0px;
}<div id="box" onclick="move()"></div>What I want it to do is make the box instantaneously jump downwards, and then slowly move back to its starting position. I have tested each of the four lines of code inside move() separately and they work perfect. I just can't get them to run in one go.
What am I doing wrong?
function move(){
document.getElementById("box").style.transition = "0s";
document.getElementById("box").style.top = "100px";
document.getElementById("box").style.transition = "2s";
document.getElementById("box").style.top = "0px";
}#box{
width:100px;
height:100px;
background:red;
position:relative;
top:0px;
}<div id="box" onclick="move()"></div>function move(){
document.getElementById("box").style.transition = "0s";
document.getElementById("box").style.top = "100px";
document.getElementById("box").style.transition = "2s";
document.getElementById("box").style.top = "0px";
}#box{
width:100px;
height:100px;
background:red;
position:relative;
top:0px;
}<div id="box" onclick="move()"></div>javascript html css animation transition
javascript html css animation transition
edited Nov 18 '18 at 14:46
Mohammad
15.6k123461
asked Nov 18 '18 at 14:25
Jonathon Philip ChambersJonathon Philip Chambers
15313
edited Nov 18 '18 at 14:46
Mohammad
15.6k123461
asked Nov 18 '18 at 14:25
Jonathon Philip ChambersJonathon Philip Chambers
15313
edited Nov 18 '18 at 14:46
Mohammad
15.6k123461
edited Nov 18 '18 at 14:46
Mohammad
15.6k123461
edited Nov 18 '18 at 14:46
Mohammad
15.6k123461
15.6k123461
asked Nov 18 '18 at 14:25
Jonathon Philip ChambersJonathon Philip Chambers
15313
asked Nov 18 '18 at 14:25
Jonathon Philip ChambersJonathon Philip Chambers
15313
asked Nov 18 '18 at 14:25
Jonathon Philip ChambersJonathon Philip Chambers
15313
15313
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
3
It seem the code needs to delay before assigning new property that cause browser can process the request. So you need to use setTimeout() to solving this problem.
function move(){
document.getElementById("box").style.transition = "0s";
document.getElementById("box").style.top = "100px";
setTimeout(function(){
document.getElementById("box").style.transition = "2s";
document.getElementById("box").style.top = "0px";
}, 10);
}#box{
width:100px;
height:100px;
background:red;
position:relative;
top:0px;
}<div id="box" onclick="move()"></div>answered Nov 18 '18 at 14:35
MohammadMohammad
15.6k123461
I think I follow this. The only bit that puzzles me is why 10ms? Why not 1ms?
– Jonathon Philip Chambers
Nov 18 '18 at 14:41
@JonathonPhilipChambers You can use 1ms if it work. I used `10ms to make sure that code work.
– Mohammad
Nov 18 '18 at 14:43
This solution works well. I changed it from 10ms to 1ms and nothing has broken yet. (Not that I can tell the difference. 1ms just feels like cleaner code to me.)
– Jonathon Philip Chambers
Nov 18 '18 at 16:31
add a comment |
1
Instead of relying on transitions, it would be better to use @keyframes and animation, so that you don't have to use dirty tricks like changing the transition duration from 0 to actual value mid-animation to achieve the jump. Below is an example that utilizes the @keyframes css features:
function move(){
document.getElementById("box").style.animation = "movement 2s";
}#box{
width:100px;
height:100px;
background:red;
position:relative;
top:0px;
}
@keyframes movement {
from {top: 100px;}
to {top: 0px;}
}<div id="box" onclick="move()"></div>answered Nov 18 '18 at 14:43
Piotr WicijowskiPiotr Wicijowski
7016
I am intrigued, but why does it only work for the first click?
– Jonathon Philip Chambers
Nov 18 '18 at 14:49
Also, will it work if the start and/or finish locations are determined by javascript?
– Jonathon Philip Chambers
Nov 18 '18 at 14:51
It works only of first click, because once the class is added, then re-adding it does not change the css rules applied, so if nothing changes, then no animation takes place. So to work with multiple clicks you need to remove the class once the animation is done. And to change locations in javascript, you can use css variables. Solution for both problems can be found in this codepen: codepen.io/anon/pen/QJqbWM
– Piotr Wicijowski
Nov 18 '18 at 15:43
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53361920%2fcss-transition-doesnt-work-when-javascript-added-properties-continuous%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
3
It seem the code needs to delay before assigning new property that cause browser can process the request. So you need to use setTimeout() to solving this problem.
function move(){
document.getElementById("box").style.transition = "0s";
document.getElementById("box").style.top = "100px";
setTimeout(function(){
document.getElementById("box").style.transition = "2s";
document.getElementById("box").style.top = "0px";
}, 10);
}#box{
width:100px;
height:100px;
background:red;
position:relative;
top:0px;
}<div id="box" onclick="move()"></div>answered Nov 18 '18 at 14:35
MohammadMohammad
15.6k123461
I think I follow this. The only bit that puzzles me is why 10ms? Why not 1ms?
– Jonathon Philip Chambers
Nov 18 '18 at 14:41
@JonathonPhilipChambers You can use 1ms if it work. I used `10ms to make sure that code work.
– Mohammad
Nov 18 '18 at 14:43
This solution works well. I changed it from 10ms to 1ms and nothing has broken yet. (Not that I can tell the difference. 1ms just feels like cleaner code to me.)
– Jonathon Philip Chambers
Nov 18 '18 at 16:31
add a comment |
3
It seem the code needs to delay before assigning new property that cause browser can process the request. So you need to use setTimeout() to solving this problem.
function move(){
document.getElementById("box").style.transition = "0s";
document.getElementById("box").style.top = "100px";
setTimeout(function(){
document.getElementById("box").style.transition = "2s";
document.getElementById("box").style.top = "0px";
}, 10);
}#box{
width:100px;
height:100px;
background:red;
position:relative;
top:0px;
}<div id="box" onclick="move()"></div>answered Nov 18 '18 at 14:35
MohammadMohammad
15.6k123461
I think I follow this. The only bit that puzzles me is why 10ms? Why not 1ms?
– Jonathon Philip Chambers
Nov 18 '18 at 14:41
@JonathonPhilipChambers You can use 1ms if it work. I used `10ms to make sure that code work.
– Mohammad
Nov 18 '18 at 14:43
This solution works well. I changed it from 10ms to 1ms and nothing has broken yet. (Not that I can tell the difference. 1ms just feels like cleaner code to me.)
– Jonathon Philip Chambers
Nov 18 '18 at 16:31
add a comment |
3
3
3
It seem the code needs to delay before assigning new property that cause browser can process the request. So you need to use setTimeout() to solving this problem.
function move(){
document.getElementById("box").style.transition = "0s";
document.getElementById("box").style.top = "100px";
setTimeout(function(){
document.getElementById("box").style.transition = "2s";
document.getElementById("box").style.top = "0px";
}, 10);
}#box{
width:100px;
height:100px;
background:red;
position:relative;
top:0px;
}<div id="box" onclick="move()"></div>answered Nov 18 '18 at 14:35
MohammadMohammad
15.6k123461
It seem the code needs to delay before assigning new property that cause browser can process the request. So you need to use setTimeout() to solving this problem.
function move(){
document.getElementById("box").style.transition = "0s";
document.getElementById("box").style.top = "100px";
setTimeout(function(){
document.getElementById("box").style.transition = "2s";
document.getElementById("box").style.top = "0px";
}, 10);
}#box{
width:100px;
height:100px;
background:red;
position:relative;
top:0px;
}<div id="box" onclick="move()"></div>function move(){
document.getElementById("box").style.transition = "0s";
document.getElementById("box").style.top = "100px";
setTimeout(function(){
document.getElementById("box").style.transition = "2s";
document.getElementById("box").style.top = "0px";
}, 10);
}#box{
width:100px;
height:100px;
background:red;
position:relative;
top:0px;
}<div id="box" onclick="move()"></div>function move(){
document.getElementById("box").style.transition = "0s";
document.getElementById("box").style.top = "100px";
setTimeout(function(){
document.getElementById("box").style.transition = "2s";
document.getElementById("box").style.top = "0px";
}, 10);
}#box{
width:100px;
height:100px;
background:red;
position:relative;
top:0px;
}<div id="box" onclick="move()"></div>answered Nov 18 '18 at 14:35
MohammadMohammad
15.6k123461
answered Nov 18 '18 at 14:35
MohammadMohammad
15.6k123461
answered Nov 18 '18 at 14:35
MohammadMohammad
15.6k123461
answered Nov 18 '18 at 14:35
MohammadMohammad
15.6k123461
15.6k123461
I think I follow this. The only bit that puzzles me is why 10ms? Why not 1ms?
– Jonathon Philip Chambers
Nov 18 '18 at 14:41
@JonathonPhilipChambers You can use 1ms if it work. I used `10ms to make sure that code work.
– Mohammad
Nov 18 '18 at 14:43
This solution works well. I changed it from 10ms to 1ms and nothing has broken yet. (Not that I can tell the difference. 1ms just feels like cleaner code to me.)
– Jonathon Philip Chambers
Nov 18 '18 at 16:31
add a comment |
I think I follow this. The only bit that puzzles me is why 10ms? Why not 1ms?
– Jonathon Philip Chambers
Nov 18 '18 at 14:41
@JonathonPhilipChambers You can use 1ms if it work. I used `10ms to make sure that code work.
– Mohammad
Nov 18 '18 at 14:43
This solution works well. I changed it from 10ms to 1ms and nothing has broken yet. (Not that I can tell the difference. 1ms just feels like cleaner code to me.)
– Jonathon Philip Chambers
Nov 18 '18 at 16:31
I think I follow this. The only bit that puzzles me is why 10ms? Why not 1ms?
– Jonathon Philip Chambers
Nov 18 '18 at 14:41
I think I follow this. The only bit that puzzles me is why 10ms? Why not 1ms?
– Jonathon Philip Chambers
Nov 18 '18 at 14:41
@JonathonPhilipChambers You can use 1ms if it work. I used `10ms to make sure that code work.
– Mohammad
Nov 18 '18 at 14:43
@JonathonPhilipChambers You can use 1ms if it work. I used `10ms to make sure that code work.
– Mohammad
Nov 18 '18 at 14:43
This solution works well. I changed it from 10ms to 1ms and nothing has broken yet. (Not that I can tell the difference. 1ms just feels like cleaner code to me.)
– Jonathon Philip Chambers
Nov 18 '18 at 16:31
This solution works well. I changed it from 10ms to 1ms and nothing has broken yet. (Not that I can tell the difference. 1ms just feels like cleaner code to me.)
– Jonathon Philip Chambers
Nov 18 '18 at 16:31
add a comment |
1
Instead of relying on transitions, it would be better to use @keyframes and animation, so that you don't have to use dirty tricks like changing the transition duration from 0 to actual value mid-animation to achieve the jump. Below is an example that utilizes the @keyframes css features:
function move(){
document.getElementById("box").style.animation = "movement 2s";
}#box{
width:100px;
height:100px;
background:red;
position:relative;
top:0px;
}
@keyframes movement {
from {top: 100px;}
to {top: 0px;}
}<div id="box" onclick="move()"></div>answered Nov 18 '18 at 14:43
Piotr WicijowskiPiotr Wicijowski
7016
I am intrigued, but why does it only work for the first click?
– Jonathon Philip Chambers
Nov 18 '18 at 14:49
Also, will it work if the start and/or finish locations are determined by javascript?
– Jonathon Philip Chambers
Nov 18 '18 at 14:51
It works only of first click, because once the class is added, then re-adding it does not change the css rules applied, so if nothing changes, then no animation takes place. So to work with multiple clicks you need to remove the class once the animation is done. And to change locations in javascript, you can use css variables. Solution for both problems can be found in this codepen: codepen.io/anon/pen/QJqbWM
– Piotr Wicijowski
Nov 18 '18 at 15:43
add a comment |
1
Instead of relying on transitions, it would be better to use @keyframes and animation, so that you don't have to use dirty tricks like changing the transition duration from 0 to actual value mid-animation to achieve the jump. Below is an example that utilizes the @keyframes css features:
function move(){
document.getElementById("box").style.animation = "movement 2s";
}#box{
width:100px;
height:100px;
background:red;
position:relative;
top:0px;
}
@keyframes movement {
from {top: 100px;}
to {top: 0px;}
}<div id="box" onclick="move()"></div>answered Nov 18 '18 at 14:43
Piotr WicijowskiPiotr Wicijowski
7016
I am intrigued, but why does it only work for the first click?
– Jonathon Philip Chambers
Nov 18 '18 at 14:49
Also, will it work if the start and/or finish locations are determined by javascript?
– Jonathon Philip Chambers
Nov 18 '18 at 14:51
It works only of first click, because once the class is added, then re-adding it does not change the css rules applied, so if nothing changes, then no animation takes place. So to work with multiple clicks you need to remove the class once the animation is done. And to change locations in javascript, you can use css variables. Solution for both problems can be found in this codepen: codepen.io/anon/pen/QJqbWM
– Piotr Wicijowski
Nov 18 '18 at 15:43
add a comment |
1
1
1
Instead of relying on transitions, it would be better to use @keyframes and animation, so that you don't have to use dirty tricks like changing the transition duration from 0 to actual value mid-animation to achieve the jump. Below is an example that utilizes the @keyframes css features:
function move(){
document.getElementById("box").style.animation = "movement 2s";
}#box{
width:100px;
height:100px;
background:red;
position:relative;
top:0px;
}
@keyframes movement {
from {top: 100px;}
to {top: 0px;}
}<div id="box" onclick="move()"></div>answered Nov 18 '18 at 14:43
Piotr WicijowskiPiotr Wicijowski
7016
Instead of relying on transitions, it would be better to use @keyframes and animation, so that you don't have to use dirty tricks like changing the transition duration from 0 to actual value mid-animation to achieve the jump. Below is an example that utilizes the @keyframes css features:
function move(){
document.getElementById("box").style.animation = "movement 2s";
}#box{
width:100px;
height:100px;
background:red;
position:relative;
top:0px;
}
@keyframes movement {
from {top: 100px;}
to {top: 0px;}
}<div id="box" onclick="move()"></div>function move(){
document.getElementById("box").style.animation = "movement 2s";
}#box{
width:100px;
height:100px;
background:red;
position:relative;
top:0px;
}
@keyframes movement {
from {top: 100px;}
to {top: 0px;}
}<div id="box" onclick="move()"></div>function move(){
document.getElementById("box").style.animation = "movement 2s";
}#box{
width:100px;
height:100px;
background:red;
position:relative;
top:0px;
}
@keyframes movement {
from {top: 100px;}
to {top: 0px;}
}<div id="box" onclick="move()"></div>answered Nov 18 '18 at 14:43
Piotr WicijowskiPiotr Wicijowski
7016
answered Nov 18 '18 at 14:43
Piotr WicijowskiPiotr Wicijowski
7016
answered Nov 18 '18 at 14:43
Piotr WicijowskiPiotr Wicijowski
7016
answered Nov 18 '18 at 14:43
Piotr WicijowskiPiotr Wicijowski
7016
7016
I am intrigued, but why does it only work for the first click?
– Jonathon Philip Chambers
Nov 18 '18 at 14:49
Also, will it work if the start and/or finish locations are determined by javascript?
– Jonathon Philip Chambers
Nov 18 '18 at 14:51
It works only of first click, because once the class is added, then re-adding it does not change the css rules applied, so if nothing changes, then no animation takes place. So to work with multiple clicks you need to remove the class once the animation is done. And to change locations in javascript, you can use css variables. Solution for both problems can be found in this codepen: codepen.io/anon/pen/QJqbWM
– Piotr Wicijowski
Nov 18 '18 at 15:43
add a comment |
I am intrigued, but why does it only work for the first click?
– Jonathon Philip Chambers
Nov 18 '18 at 14:49
Also, will it work if the start and/or finish locations are determined by javascript?
– Jonathon Philip Chambers
Nov 18 '18 at 14:51
It works only of first click, because once the class is added, then re-adding it does not change the css rules applied, so if nothing changes, then no animation takes place. So to work with multiple clicks you need to remove the class once the animation is done. And to change locations in javascript, you can use css variables. Solution for both problems can be found in this codepen: codepen.io/anon/pen/QJqbWM
– Piotr Wicijowski
Nov 18 '18 at 15:43
I am intrigued, but why does it only work for the first click?
– Jonathon Philip Chambers
Nov 18 '18 at 14:49
I am intrigued, but why does it only work for the first click?
– Jonathon Philip Chambers
Nov 18 '18 at 14:49
Also, will it work if the start and/or finish locations are determined by javascript?
– Jonathon Philip Chambers
Nov 18 '18 at 14:51
Also, will it work if the start and/or finish locations are determined by javascript?
– Jonathon Philip Chambers
Nov 18 '18 at 14:51
It works only of first click, because once the class is added, then re-adding it does not change the css rules applied, so if nothing changes, then no animation takes place. So to work with multiple clicks you need to remove the class once the animation is done. And to change locations in javascript, you can use css variables. Solution for both problems can be found in this codepen: codepen.io/anon/pen/QJqbWM
– Piotr Wicijowski
Nov 18 '18 at 15:43
It works only of first click, because once the class is added, then re-adding it does not change the css rules applied, so if nothing changes, then no animation takes place. So to work with multiple clicks you need to remove the class once the animation is done. And to change locations in javascript, you can use css variables. Solution for both problems can be found in this codepen: codepen.io/anon/pen/QJqbWM
– Piotr Wicijowski
Nov 18 '18 at 15:43
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53361920%2fcss-transition-doesnt-work-when-javascript-added-properties-continuous%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
