give it a timeout without first delay

Question

Im really confused on this one. So i want to add a class to element on hover with some css junk, and remove it on mouseout. But i want to forbid the add and remove functions for the duration of css transition. For instance, i have 1s transition, i want to run add function on hover, and for the next 1 second add 我怎么能做到这一点？

<div class="registration" onmouseover="addReg()" onmouseout="removeReg()">

const registration=document.querySelector('.registration');
const registrationInner=document.querySelector('.registration-inner');

function addReg(){
  registration.classList.add('registration-hover');
  registrationInner.classList.add('inner-hover');

}
function removeReg(){
  registration.classList.remove('registration-hover');
  registrationInner.classList.remove('inner-hover');
}

换句话说，我想做一个悬停的css过渡，它不能在运行时被中断停止重置，这就是为什么我试图使用adding class方法，而不是只用:hover。

在函数调用中添加setTimeout没有任何帮助，因为它并没有阻止其他函数的启动，而是反过来。

如果我在函数调用中添加 async 并创建 await sleep 功能

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

同样的问题。比如说，我只能暂停添加功能，但我暂停添加功能并不能阻止移除功能的触发。但我暂停添加功能并没有阻止移除功能的触发。

但同时我也不太在意删除延迟，所以我选择了这个版本。

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

registration=document.querySelector('.registration');
registrationInner=document.querySelector('.registration-inner');

async function addReg(){
  registration.classList.add('registration-hover');
  registrationInner.classList.add('inner-hover');
  await sleep(350);

}

async function removeReg(){
  await sleep(350);
  registration.classList.remove('registration-hover');
  registrationInner.classList.remove('inner-hover');
}

Answer 1

我的过渡期是0.3秒，所以我用了更大的超时延时，而且我在鼠标移出时设置了额外的过渡延时，以防止意外的错误，所以我不介意删除功能的延时。

function sleep(ms) {
      return new Promise(resolve => setTimeout(resolve, ms));
    }

    registration=document.querySelector('.registration');
    registrationInner=document.querySelector('.registration-inner');

    async function addReg(){
      registration.classList.add('registration-hover');
      registrationInner.classList.add('inner-hover');
      await sleep(300);

    }

    async function removeReg(){
      await sleep(400);
      registration.classList.remove('registration-hover');
      registrationInner.classList.remove('inner-hover');
    }