css transition didn't work when i change the className using js
2
When i change the className with js, it should TRANSITION in my mind.. But.. the code below didn't work
let canvas = document.getElementById("canvas");
let types = 'center'
canvas.addEventListener('click', function (e)
let target = this
target.style.position = 'relative'
target.style.overflow = 'hidden'
let ripple = target.querySelector('.ripple')
/* 无ripple 说明第一次点击 */
if (!ripple)
ripple = document.createElement('span')
ripple.className = 'ripple'
ripple.style.height = ripple.style.width = `120px`
target.appendChild(ripple)
else
ripple.className = 'ripple'
//ripple.style.top = e.pageY + 'px';
// ripple.style.left = e.pageX + 'px'
// console.log(e.pageY);
//console.log(e.pageX);
switch (types)
case 'center':
ripple.style.top = `$ripple.offsetHeight / 2px`
ripple.style.left = `$ripple.offsetWidth / 2px`
break
default:
ripple.style.top = `$ripple.offsetHeight / 2px`
ripple.style.left = `$ripple.offsetWidth / 2px`
ripple.style.backgroundColor = '#999'
ripple.className = 'ripple active'
).ripple
position: absolute;
border-radius: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
.ripple.active
-webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
transition: opacity 1.2s ease-out, transform 0.6s ease-out;
transition: opacity 1.2s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);<div id="canvas" style="width: 100%;height: 1024px">
canvas
</div>As you can see the code above, if i change the className and using the
ripple.style.top = e.pageY + 'px';
ripple.style.left = e.pageX + 'px'
It cant emit the transition..However if using the switch code, which is the same as the code above i think, it worked!
It's so confusing, can anybody help me?
javascript html css
edited Nov 15 '18 at 5:47
לבני מלכה
10.6k1827
asked Nov 15 '18 at 5:23
Z DJZ DJ
133
add a comment |
2
When i change the className with js, it should TRANSITION in my mind.. But.. the code below didn't work
let canvas = document.getElementById("canvas");
let types = 'center'
canvas.addEventListener('click', function (e)
let target = this
target.style.position = 'relative'
target.style.overflow = 'hidden'
let ripple = target.querySelector('.ripple')
/* 无ripple 说明第一次点击 */
if (!ripple)
ripple = document.createElement('span')
ripple.className = 'ripple'
ripple.style.height = ripple.style.width = `120px`
target.appendChild(ripple)
else
ripple.className = 'ripple'
//ripple.style.top = e.pageY + 'px';
// ripple.style.left = e.pageX + 'px'
// console.log(e.pageY);
//console.log(e.pageX);
switch (types)
case 'center':
ripple.style.top = `$ripple.offsetHeight / 2px`
ripple.style.left = `$ripple.offsetWidth / 2px`
break
default:
ripple.style.top = `$ripple.offsetHeight / 2px`
ripple.style.left = `$ripple.offsetWidth / 2px`
ripple.style.backgroundColor = '#999'
ripple.className = 'ripple active'
).ripple
position: absolute;
border-radius: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
.ripple.active
-webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
transition: opacity 1.2s ease-out, transform 0.6s ease-out;
transition: opacity 1.2s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);<div id="canvas" style="width: 100%;height: 1024px">
canvas
</div>As you can see the code above, if i change the className and using the
ripple.style.top = e.pageY + 'px';
ripple.style.left = e.pageX + 'px'
It cant emit the transition..However if using the switch code, which is the same as the code above i think, it worked!
It's so confusing, can anybody help me?
javascript html css
edited Nov 15 '18 at 5:47
לבני מלכה
10.6k1827
asked Nov 15 '18 at 5:23
Z DJZ DJ
133
add a comment |
2
2
2
1
When i change the className with js, it should TRANSITION in my mind.. But.. the code below didn't work
let canvas = document.getElementById("canvas");
let types = 'center'
canvas.addEventListener('click', function (e)
let target = this
target.style.position = 'relative'
target.style.overflow = 'hidden'
let ripple = target.querySelector('.ripple')
/* 无ripple 说明第一次点击 */
if (!ripple)
ripple = document.createElement('span')
ripple.className = 'ripple'
ripple.style.height = ripple.style.width = `120px`
target.appendChild(ripple)
else
ripple.className = 'ripple'
//ripple.style.top = e.pageY + 'px';
// ripple.style.left = e.pageX + 'px'
// console.log(e.pageY);
//console.log(e.pageX);
switch (types)
case 'center':
ripple.style.top = `$ripple.offsetHeight / 2px`
ripple.style.left = `$ripple.offsetWidth / 2px`
break
default:
ripple.style.top = `$ripple.offsetHeight / 2px`
ripple.style.left = `$ripple.offsetWidth / 2px`
ripple.style.backgroundColor = '#999'
ripple.className = 'ripple active'
).ripple
position: absolute;
border-radius: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
.ripple.active
-webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
transition: opacity 1.2s ease-out, transform 0.6s ease-out;
transition: opacity 1.2s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);<div id="canvas" style="width: 100%;height: 1024px">
canvas
</div>As you can see the code above, if i change the className and using the
ripple.style.top = e.pageY + 'px';
ripple.style.left = e.pageX + 'px'
It cant emit the transition..However if using the switch code, which is the same as the code above i think, it worked!
It's so confusing, can anybody help me?
javascript html css
edited Nov 15 '18 at 5:47
לבני מלכה
10.6k1827
asked Nov 15 '18 at 5:23
Z DJZ DJ
133
When i change the className with js, it should TRANSITION in my mind.. But.. the code below didn't work
let canvas = document.getElementById("canvas");
let types = 'center'
canvas.addEventListener('click', function (e)
let target = this
target.style.position = 'relative'
target.style.overflow = 'hidden'
let ripple = target.querySelector('.ripple')
/* 无ripple 说明第一次点击 */
if (!ripple)
ripple = document.createElement('span')
ripple.className = 'ripple'
ripple.style.height = ripple.style.width = `120px`
target.appendChild(ripple)
else
ripple.className = 'ripple'
//ripple.style.top = e.pageY + 'px';
// ripple.style.left = e.pageX + 'px'
// console.log(e.pageY);
//console.log(e.pageX);
switch (types)
case 'center':
ripple.style.top = `$ripple.offsetHeight / 2px`
ripple.style.left = `$ripple.offsetWidth / 2px`
break
default:
ripple.style.top = `$ripple.offsetHeight / 2px`
ripple.style.left = `$ripple.offsetWidth / 2px`
ripple.style.backgroundColor = '#999'
ripple.className = 'ripple active'
).ripple
position: absolute;
border-radius: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
.ripple.active
-webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
transition: opacity 1.2s ease-out, transform 0.6s ease-out;
transition: opacity 1.2s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);<div id="canvas" style="width: 100%;height: 1024px">
canvas
</div>As you can see the code above, if i change the className and using the
ripple.style.top = e.pageY + 'px';
ripple.style.left = e.pageX + 'px'
It cant emit the transition..However if using the switch code, which is the same as the code above i think, it worked!
It's so confusing, can anybody help me?
let canvas = document.getElementById("canvas");
let types = 'center'
canvas.addEventListener('click', function (e)
let target = this
target.style.position = 'relative'
target.style.overflow = 'hidden'
let ripple = target.querySelector('.ripple')
/* 无ripple 说明第一次点击 */
if (!ripple)
ripple = document.createElement('span')
ripple.className = 'ripple'
ripple.style.height = ripple.style.width = `120px`
target.appendChild(ripple)
else
ripple.className = 'ripple'
//ripple.style.top = e.pageY + 'px';
// ripple.style.left = e.pageX + 'px'
// console.log(e.pageY);
//console.log(e.pageX);
switch (types)
case 'center':
ripple.style.top = `$ripple.offsetHeight / 2px`
ripple.style.left = `$ripple.offsetWidth / 2px`
break
default:
ripple.style.top = `$ripple.offsetHeight / 2px`
ripple.style.left = `$ripple.offsetWidth / 2px`
ripple.style.backgroundColor = '#999'
ripple.className = 'ripple active'
).ripple
position: absolute;
border-radius: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
.ripple.active
-webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
transition: opacity 1.2s ease-out, transform 0.6s ease-out;
transition: opacity 1.2s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);<div id="canvas" style="width: 100%;height: 1024px">
canvas
</div> let canvas = document.getElementById("canvas");
let types = 'center'
canvas.addEventListener('click', function (e)
let target = this
target.style.position = 'relative'
target.style.overflow = 'hidden'
let ripple = target.querySelector('.ripple')
/* 无ripple 说明第一次点击 */
if (!ripple)
ripple = document.createElement('span')
ripple.className = 'ripple'
ripple.style.height = ripple.style.width = `120px`
target.appendChild(ripple)
else
ripple.className = 'ripple'
//ripple.style.top = e.pageY + 'px';
// ripple.style.left = e.pageX + 'px'
// console.log(e.pageY);
//console.log(e.pageX);
switch (types)
case 'center':
ripple.style.top = `$ripple.offsetHeight / 2px`
ripple.style.left = `$ripple.offsetWidth / 2px`
break
default:
ripple.style.top = `$ripple.offsetHeight / 2px`
ripple.style.left = `$ripple.offsetWidth / 2px`
ripple.style.backgroundColor = '#999'
ripple.className = 'ripple active'
).ripple
position: absolute;
border-radius: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
.ripple.active
-webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
transition: opacity 1.2s ease-out, transform 0.6s ease-out;
transition: opacity 1.2s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);<div id="canvas" style="width: 100%;height: 1024px">
canvas
</div>javascript html css
javascript html css
edited Nov 15 '18 at 5:47
לבני מלכה
10.6k1827
asked Nov 15 '18 at 5:23
Z DJZ DJ
133
edited Nov 15 '18 at 5:47
לבני מלכה
10.6k1827
asked Nov 15 '18 at 5:23
Z DJZ DJ
133
edited Nov 15 '18 at 5:47
לבני מלכה
10.6k1827
edited Nov 15 '18 at 5:47
לבני מלכה
10.6k1827
edited Nov 15 '18 at 5:47
לבני מלכה
10.6k1827
10.6k1827
asked Nov 15 '18 at 5:23
Z DJZ DJ
133
asked Nov 15 '18 at 5:23
Z DJZ DJ
133
asked Nov 15 '18 at 5:23
Z DJZ DJ
133
133
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
As I run your code with ripple.style.left = e.pageX + 'px' I saw that without use console.log() it does not work so as I understood you have to give the program few milliseconds to "rest" and set the new position to solve that I use setTimeout with 0 time then I set the new className
More information:
- quara
stack overflow
setTimeout(function()
ripple.style.backgroundColor = '#999999';
ripple.className = 'ripple active'
,0);
See working code:
let canvas = document.getElementById("canvas");
let types = 'center'
canvas.addEventListener('click', function (e)
let target = this
target.style.position = 'relative'
target.style.overflow = 'hidden'
let ripple = target.querySelector('.ripple')
/* 无ripple 说明第一次点击 */
if (!ripple)
ripple = document.createElement('span')
ripple.className = 'ripple'
ripple.style.height = ripple.style.width = `120px`
target.appendChild(ripple)
else
ripple.className = 'ripple'
ripple.style.top = e.pageY + 'px';
ripple.style.left = e.pageX + 'px';
setTimeout(function()
ripple.style.backgroundColor = '#999999';
ripple.className = 'ripple active'
,0);
).ripple
position: absolute;
border-radius: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
.ripple.active
-webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
transition: opacity 1.2s ease-out, transform 0.6s ease-out;
transition: opacity 1.2s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
<div id="canvas" style="width: 100%;height: 1024px">
canvs
</div>answered Nov 15 '18 at 6:08
לבני מלכהלבני מלכה
10.6k1827
Thanks for help! It solve this question actually.But i'd like to know deeper about this problem.. As you said,I need to give it some time to rest.So.. what is the 'rest'..Do you have some concrete explaination on it? Btw, if i use the switch syntax,it can work.Dose it mean switch is more Time-consuming？ Thanks again for your help! It helps a lot! @לבני מלכה
– Z DJ
Nov 15 '18 at 12:21
Hey...first I edited my answer second read here quora.com/…
– לבני מלכה
Nov 15 '18 at 12:32
more here:stackoverflow.com/questions/779379/…
– לבני מלכה
Nov 15 '18 at 12:32
Thank you so much! It helped me a lot!!
– Z DJ
Nov 19 '18 at 10:48
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%2f53312938%2fcss-transition-didnt-work-when-i-change-the-classname-using-js%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
As I run your code with ripple.style.left = e.pageX + 'px' I saw that without use console.log() it does not work so as I understood you have to give the program few milliseconds to "rest" and set the new position to solve that I use setTimeout with 0 time then I set the new className
More information:
- quara
stack overflow
setTimeout(function()
ripple.style.backgroundColor = '#999999';
ripple.className = 'ripple active'
,0);
See working code:
let canvas = document.getElementById("canvas");
let types = 'center'
canvas.addEventListener('click', function (e)
let target = this
target.style.position = 'relative'
target.style.overflow = 'hidden'
let ripple = target.querySelector('.ripple')
/* 无ripple 说明第一次点击 */
if (!ripple)
ripple = document.createElement('span')
ripple.className = 'ripple'
ripple.style.height = ripple.style.width = `120px`
target.appendChild(ripple)
else
ripple.className = 'ripple'
ripple.style.top = e.pageY + 'px';
ripple.style.left = e.pageX + 'px';
setTimeout(function()
ripple.style.backgroundColor = '#999999';
ripple.className = 'ripple active'
,0);
).ripple
position: absolute;
border-radius: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
.ripple.active
-webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
transition: opacity 1.2s ease-out, transform 0.6s ease-out;
transition: opacity 1.2s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
<div id="canvas" style="width: 100%;height: 1024px">
canvs
</div>answered Nov 15 '18 at 6:08
לבני מלכהלבני מלכה
10.6k1827
Thanks for help! It solve this question actually.But i'd like to know deeper about this problem.. As you said,I need to give it some time to rest.So.. what is the 'rest'..Do you have some concrete explaination on it? Btw, if i use the switch syntax,it can work.Dose it mean switch is more Time-consuming？ Thanks again for your help! It helps a lot! @לבני מלכה
– Z DJ
Nov 15 '18 at 12:21
Hey...first I edited my answer second read here quora.com/…
– לבני מלכה
Nov 15 '18 at 12:32
more here:stackoverflow.com/questions/779379/…
– לבני מלכה
Nov 15 '18 at 12:32
Thank you so much! It helped me a lot!!
– Z DJ
Nov 19 '18 at 10:48
add a comment |
0
As I run your code with ripple.style.left = e.pageX + 'px' I saw that without use console.log() it does not work so as I understood you have to give the program few milliseconds to "rest" and set the new position to solve that I use setTimeout with 0 time then I set the new className
More information:
- quara
stack overflow
setTimeout(function()
ripple.style.backgroundColor = '#999999';
ripple.className = 'ripple active'
,0);
See working code:
let canvas = document.getElementById("canvas");
let types = 'center'
canvas.addEventListener('click', function (e)
let target = this
target.style.position = 'relative'
target.style.overflow = 'hidden'
let ripple = target.querySelector('.ripple')
/* 无ripple 说明第一次点击 */
if (!ripple)
ripple = document.createElement('span')
ripple.className = 'ripple'
ripple.style.height = ripple.style.width = `120px`
target.appendChild(ripple)
else
ripple.className = 'ripple'
ripple.style.top = e.pageY + 'px';
ripple.style.left = e.pageX + 'px';
setTimeout(function()
ripple.style.backgroundColor = '#999999';
ripple.className = 'ripple active'
,0);
).ripple
position: absolute;
border-radius: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
.ripple.active
-webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
transition: opacity 1.2s ease-out, transform 0.6s ease-out;
transition: opacity 1.2s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
<div id="canvas" style="width: 100%;height: 1024px">
canvs
</div>answered Nov 15 '18 at 6:08
לבני מלכהלבני מלכה
10.6k1827
Thanks for help! It solve this question actually.But i'd like to know deeper about this problem.. As you said,I need to give it some time to rest.So.. what is the 'rest'..Do you have some concrete explaination on it? Btw, if i use the switch syntax,it can work.Dose it mean switch is more Time-consuming？ Thanks again for your help! It helps a lot! @לבני מלכה
– Z DJ
Nov 15 '18 at 12:21
Hey...first I edited my answer second read here quora.com/…
– לבני מלכה
Nov 15 '18 at 12:32
more here:stackoverflow.com/questions/779379/…
– לבני מלכה
Nov 15 '18 at 12:32
Thank you so much! It helped me a lot!!
– Z DJ
Nov 19 '18 at 10:48
add a comment |
0
0
0
As I run your code with ripple.style.left = e.pageX + 'px' I saw that without use console.log() it does not work so as I understood you have to give the program few milliseconds to "rest" and set the new position to solve that I use setTimeout with 0 time then I set the new className
More information:
- quara
stack overflow
setTimeout(function()
ripple.style.backgroundColor = '#999999';
ripple.className = 'ripple active'
,0);
See working code:
let canvas = document.getElementById("canvas");
let types = 'center'
canvas.addEventListener('click', function (e)
let target = this
target.style.position = 'relative'
target.style.overflow = 'hidden'
let ripple = target.querySelector('.ripple')
/* 无ripple 说明第一次点击 */
if (!ripple)
ripple = document.createElement('span')
ripple.className = 'ripple'
ripple.style.height = ripple.style.width = `120px`
target.appendChild(ripple)
else
ripple.className = 'ripple'
ripple.style.top = e.pageY + 'px';
ripple.style.left = e.pageX + 'px';
setTimeout(function()
ripple.style.backgroundColor = '#999999';
ripple.className = 'ripple active'
,0);
).ripple
position: absolute;
border-radius: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
.ripple.active
-webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
transition: opacity 1.2s ease-out, transform 0.6s ease-out;
transition: opacity 1.2s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
<div id="canvas" style="width: 100%;height: 1024px">
canvs
</div>answered Nov 15 '18 at 6:08
לבני מלכהלבני מלכה
10.6k1827
As I run your code with ripple.style.left = e.pageX + 'px' I saw that without use console.log() it does not work so as I understood you have to give the program few milliseconds to "rest" and set the new position to solve that I use setTimeout with 0 time then I set the new className
More information:
- quara
stack overflow
setTimeout(function()
ripple.style.backgroundColor = '#999999';
ripple.className = 'ripple active'
,0);
See working code:
let canvas = document.getElementById("canvas");
let types = 'center'
canvas.addEventListener('click', function (e)
let target = this
target.style.position = 'relative'
target.style.overflow = 'hidden'
let ripple = target.querySelector('.ripple')
/* 无ripple 说明第一次点击 */
if (!ripple)
ripple = document.createElement('span')
ripple.className = 'ripple'
ripple.style.height = ripple.style.width = `120px`
target.appendChild(ripple)
else
ripple.className = 'ripple'
ripple.style.top = e.pageY + 'px';
ripple.style.left = e.pageX + 'px';
setTimeout(function()
ripple.style.backgroundColor = '#999999';
ripple.className = 'ripple active'
,0);
).ripple
position: absolute;
border-radius: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
.ripple.active
-webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
transition: opacity 1.2s ease-out, transform 0.6s ease-out;
transition: opacity 1.2s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
<div id="canvas" style="width: 100%;height: 1024px">
canvs
</div> let canvas = document.getElementById("canvas");
let types = 'center'
canvas.addEventListener('click', function (e)
let target = this
target.style.position = 'relative'
target.style.overflow = 'hidden'
let ripple = target.querySelector('.ripple')
/* 无ripple 说明第一次点击 */
if (!ripple)
ripple = document.createElement('span')
ripple.className = 'ripple'
ripple.style.height = ripple.style.width = `120px`
target.appendChild(ripple)
else
ripple.className = 'ripple'
ripple.style.top = e.pageY + 'px';
ripple.style.left = e.pageX + 'px';
setTimeout(function()
ripple.style.backgroundColor = '#999999';
ripple.className = 'ripple active'
,0);
).ripple
position: absolute;
border-radius: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
.ripple.active
-webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
transition: opacity 1.2s ease-out, transform 0.6s ease-out;
transition: opacity 1.2s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
<div id="canvas" style="width: 100%;height: 1024px">
canvs
</div> let canvas = document.getElementById("canvas");
let types = 'center'
canvas.addEventListener('click', function (e)
let target = this
target.style.position = 'relative'
target.style.overflow = 'hidden'
let ripple = target.querySelector('.ripple')
/* 无ripple 说明第一次点击 */
if (!ripple)
ripple = document.createElement('span')
ripple.className = 'ripple'
ripple.style.height = ripple.style.width = `120px`
target.appendChild(ripple)
else
ripple.className = 'ripple'
ripple.style.top = e.pageY + 'px';
ripple.style.left = e.pageX + 'px';
setTimeout(function()
ripple.style.backgroundColor = '#999999';
ripple.className = 'ripple active'
,0);
).ripple
position: absolute;
border-radius: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
.ripple.active
-webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
transition: opacity 1.2s ease-out, transform 0.6s ease-out;
transition: opacity 1.2s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
<div id="canvas" style="width: 100%;height: 1024px">
canvs
</div>answered Nov 15 '18 at 6:08
לבני מלכהלבני מלכה
10.6k1827
edited Nov 15 '18 at 12:36
answered Nov 15 '18 at 6:08
לבני מלכהלבני מלכה
10.6k1827
answered Nov 15 '18 at 6:08
לבני מלכהלבני מלכה
10.6k1827
answered Nov 15 '18 at 6:08
לבני מלכהלבני מלכה
10.6k1827
10.6k1827
Thanks for help! It solve this question actually.But i'd like to know deeper about this problem.. As you said,I need to give it some time to rest.So.. what is the 'rest'..Do you have some concrete explaination on it? Btw, if i use the switch syntax,it can work.Dose it mean switch is more Time-consuming？ Thanks again for your help! It helps a lot! @לבני מלכה
– Z DJ
Nov 15 '18 at 12:21
Hey...first I edited my answer second read here quora.com/…
– לבני מלכה
Nov 15 '18 at 12:32
more here:stackoverflow.com/questions/779379/…
– לבני מלכה
Nov 15 '18 at 12:32
Thank you so much! It helped me a lot!!
– Z DJ
Nov 19 '18 at 10:48
add a comment |
Thanks for help! It solve this question actually.But i'd like to know deeper about this problem.. As you said,I need to give it some time to rest.So.. what is the 'rest'..Do you have some concrete explaination on it? Btw, if i use the switch syntax,it can work.Dose it mean switch is more Time-consuming？ Thanks again for your help! It helps a lot! @לבני מלכה
– Z DJ
Nov 15 '18 at 12:21
Hey...first I edited my answer second read here quora.com/…
– לבני מלכה
Nov 15 '18 at 12:32
more here:stackoverflow.com/questions/779379/…
– לבני מלכה
Nov 15 '18 at 12:32
Thank you so much! It helped me a lot!!
– Z DJ
Nov 19 '18 at 10:48
Thanks for help! It solve this question actually.But i'd like to know deeper about this problem.. As you said,I need to give it some time to rest.So.. what is the 'rest'..Do you have some concrete explaination on it? Btw, if i use the switch syntax,it can work.Dose it mean switch is more Time-consuming？ Thanks again for your help! It helps a lot! @לבני מלכה
– Z DJ
Nov 15 '18 at 12:21
Thanks for help! It solve this question actually.But i'd like to know deeper about this problem.. As you said,I need to give it some time to rest.So.. what is the 'rest'..Do you have some concrete explaination on it? Btw, if i use the switch syntax,it can work.Dose it mean switch is more Time-consuming？ Thanks again for your help! It helps a lot! @לבני מלכה
– Z DJ
Nov 15 '18 at 12:21
Hey...first I edited my answer second read here quora.com/…
– לבני מלכה
Nov 15 '18 at 12:32
Hey...first I edited my answer second read here quora.com/…
– לבני מלכה
Nov 15 '18 at 12:32
more here:stackoverflow.com/questions/779379/…
– לבני מלכה
Nov 15 '18 at 12:32
more here:stackoverflow.com/questions/779379/…
– לבני מלכה
Nov 15 '18 at 12:32
Thank you so much! It helped me a lot!!
– Z DJ
Nov 19 '18 at 10:48
Thank you so much! It helped me a lot!!
– Z DJ
Nov 19 '18 at 10:48
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%2f53312938%2fcss-transition-didnt-work-when-i-change-the-classname-using-js%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
