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

Question

当我用js更改className时，它应该在我的脑海中过渡。....以下代码无效

		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>

您可以看到上面的代码，如果我更改className并使用 ripple.style.top = e.pageY + 'px'; ripple.style.left = e.pageX + 'px' 它不能发出过渡。.但是，如果使用开关代码（与我认为的上面的代码相同），就可以了！ 真令人困惑，有人可以帮助我吗？

Answer 1

当我使用ripple.style.left = e.pageX + 'px'运行您的代码时，我发现如果不使用console.log()它将无法正常工作，因此据我了解，您必须给程序几毫秒的时间来“休息”并设置新的{{ 1}}解决了我在position时间使用setTimeout的问题，然后设置了新的0

更多信息：

• quara

• stack overflow

  className

请参阅工作代码：

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);
}