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

לבני מלכה · Accepted Answer · 2018-11-15T12:36:39.813

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>

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 https://www.quora.com/What-does-setTimeout-with-a-0ms-delay-do-Is-this-some-trick-to-spawn-a-new-thread-but-why — לבני מלכה, Nov 15 '18 at 12:32
more here:https://stackoverflow.com/questions/779379/why-is-settimeoutfn-0-sometimes-useful — לבני מלכה, Nov 15 '18 at 12:32

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

1 Answers1