[英]css transition didn't work when i change the className using js
When i change the className with js, it should TRANSITION in my mind.. But.. the code below didn't work 当我用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>
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'
如您在上面的代码中看到的,如果我更改className并使用
ripple.style.top = e.pageY + 'px'; ripple.style.left = e.pageX + 'px'
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! ripple.style.top = e.pageY + 'px'; ripple.style.left = e.pageX + 'px'
它不能发出过渡ripple.style.top = e.pageY + 'px'; ripple.style.left = e.pageX + 'px'
但是,如果使用开关代码,它与上面我认为的代码相同,就可以了! It's so confusing, can anybody help me? 太混乱了,有人可以帮助我吗?
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
当我使用
ripple.style.left = e.pageX + 'px'
运行代码时,我发现如果不使用console.log()
它将无法正常工作,因为据我了解,您必须给程序几毫秒的时间才能“休息”,设置新position
以解决我将setTimeout
与0
时间一起使用的问题,然后设置新的className
More information: 更多信息:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.