时间戳

首页 > 解决方案 > 当我使用 js 更改类名时，css 转换不起作用

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

问题描述

当我用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' 它不能发出转换。但是如果使用与上面的代码相同的 switch 代码，它可以工作！太混乱了，谁能帮帮我？

标签： javascripthtmlcss

解决方案

当我运行您的代码时，ripple.style.left = e.pageX + 'px'我看到不使用console.log()它不起作用，所以据我所知，您必须给程序几毫秒“休息”并设置新position的以解决我setTimeout随0时间使用的问题，然后我设置新的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);
}
<div id="canvas" style="width: 100%;height: 1024px">
canvs
</div>

推荐阅读