give it a timeout without first delay

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

解决方案:

我的过渡期是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');
    }

给TA打赏
共{{data.count}}人
人已打赏
未分类

Rails终端命令在12秒后运行,为什么?

2022-9-8 22:11:30

未分类

如何在C#上使用Costum对象创建一个arrayList?

2022-9-8 22:11:32

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索