css transition didn't work when i change the className using js

Question

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 / 2}px` ripple.style.left = `${ripple.offsetWidth / 2}px` break default: ripple.style.top = `${ripple.offsetHeight / 2}px` ripple.style.left = `${ripple.offsetWidth / 2}px` } 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' 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?

Answer 1

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>