Javascript css转换没有'；当我使用js更改类名时，它不起作用

当我用js更改类名时，它应该会在我的脑海中转换。。但是下面的代码不起作用

let canvas=document.getElementById（“canvas”）；
让类型='center'
canvas.addEventListener（'click'，函数（e）{
让target=this
target.style.position='relative'
target.style.overflow='hidden'
让ripple=target.querySelector（“.ripple”）
/* 无涟漪说明第一次点击 */
如果（！波纹）{
ripple=document.createElement（'span'）
ripple.className='ripple'
ripple.style.height=ripple.style.width=`120px`
target.appendChild（ripple）
}否则{
ripple.className='ripple'
}
//ripple.style.top=e.pageY+'px'；
//ripple.style.left=e.pageX+'px'
//控制台日志（e.pageY）；
//console.log（e.pageX）；
开关（类型）{
案例“中心”：
ripple.style.top=`${ripple.offsetHeight/2}px`
ripple.style.left=`${ripple.offsetWidth/2}px`
打破
违约：
ripple.style.top=`${ripple.offsetHeight/2}px`
ripple.style.left=`${ripple.offsetWidth/2}px`
}
ripple.style.backgroundColor='#999'
ripple.className='ripple active'
})

.ripple{
位置：绝对位置；
边界半径：100%；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
-webkit变换：缩放（0）；
-ms变换：尺度（0）；
变换：比例（0）；
}
.ripple.active{
-webkit转换：不透明度1.2s衰减，-webkit转换0.6s衰减；
过渡：不透明度1.2s缓减，-webkit变换0.6s缓减；
过渡：不透明度1.2s缓减，变换0.6s缓减；
过渡：不透明度1.2s缓减，变换0.6s缓减，-webkit变换0.6s缓减；
-webkit转换：规模（2）；
-ms变换：尺度（2）；
变换：缩放（2）；}

帆布

当我使用

ripple.style.left=e.pageX+'px'

运行您的代码时，我发现如果不使用

console.log（）

它将无法工作，因此我知道您必须给程序几毫秒的“休息时间”设置新的

位置

以解决我使用

setTimeout

和

0

时间的问题，然后设置新的

className

更多信息：

• setTimeout（函数（）{
  ripple.style.backgroundColor='#999999'；
  ripple.className='ripple active'
  
  },0);
  

见工作代码：

let canvas=document.getElementById（“canvas”）；
让类型='center'
canvas.addEventListener（'click'，函数（e）{
让target=this
target.style.position='relative'
target.style.overflow='hidden'
让ripple=target.querySelector（“.ripple”）
/* 无涟漪说明第一次点击 */
如果（！波纹）{
ripple=document.createElement（'span'）
ripple.className='ripple'
ripple.style.height=ripple.style.width=`120px`
target.appendChild（ripple）
}否则{
ripple.className='ripple'
}
ripple.style.top=e.pageY+'px'；
ripple.style.left=e.pageX+'px'；
setTimeout（函数（）{
ripple.style.backgroundColor='#999999'；
ripple.className='ripple active'
},0);
})

.ripple{
位置：绝对位置；
边界半径：100%；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
-webkit变换：缩放（0）；
-ms变换：尺度（0）；
变换：比例（0）；
}
.ripple.active{
-webkit转换：不透明度1.2s衰减，-webkit转换0.6s衰减；
过渡：不透明度1.2s缓减，-webkit变换0.6s缓减；
过渡：不透明度1.2s缓减，变换0.6s缓减；
过渡：不透明度1.2s缓减，变换0.6s缓减，-webkit变换0.6s缓减；
-webkit转换：规模（2）；
-ms变换：尺度（2）；
变换：尺度（2）；
}

坎维斯

谢谢您的帮助！它实际上解决了这个问题，但我想更深入地了解这个问题。。正如你所说，我需要给它一些时间休息。所以。。“剩下的”是什么？你有什么具体的解释吗？顺便说一句，如果我使用开关语法，它可以工作。这是否意味着开关更耗时？再次感谢您的帮助！这很有帮助@嘿…首先我编辑了我的答案，然后在这里阅读更多：非常感谢！这对我帮助很大！！