javascript - 当我使用js更改className时，css转换不起作用

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

		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>

如您所见，如果我更改类名并使用
ripple.style.top = e.pageY + 'px';ripple.style.left = e.pageX + 'px'
它不能发出转换..但是如果使用与上面代码相同的开关代码，它就工作了！
太混乱了，有人能帮我吗？

最佳答案

当我用ripple.style.left = e.pageX + 'px'运行你的代码时，我看到如果不使用console.log()它就不起作用，所以我知道你必须给程序几毫秒的时间来“休息”，然后设置新的position来解决我用setTimeout和0时间的问题，然后设置新的className
更多信息：
quara
stack overflow
setTimeout(function(){ ripple.style.backgroundColor = '#999999'; ripple.className = 'ripple active'
},0);
见工作代码：

    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>

关于javascript - 当我使用js更改className时，css转换不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53312938/