Javascript 如何使模糊动画每次都运行得更快？

当我点击按钮时，我试图模糊我的所有页面并显示一个“弹出窗体”，这实际上是可行的，但是第一次点击时动画速度非常慢，所以我试图找到任何解决方案来解决这个问题

我在本地wamp服务器上运行它，我尝试了很多浏览器，每次第一次点击似乎很慢，我甚至尝试在线上传网站，这是相同的结果

var-vid=document.getElementById（“bgvid”）；
vid.volume=0.01；
var x=document.getElementById（“formregister”）；
var container=document.getElementById（'container'）；
var top_vid=
document.getElementById（'top_vid'）
函数hideShow（）
{
如果（x.style.display==“无”）
{
x、 style.display=“block”；
参阅classList.remove（'noblur'）；
top_vid.classList.remove（'noblur'）；
vid.className+=“模糊”；
top_vid.className+=“模糊”；
}
其他的
{
x、 style.display=“无”；
vid.className+=“noblur”；
top_vid.className+=“noblur”；
vid.classList.remove（'blur'）；
top_vid.classList.remove（'blur'）；
}
}

@导入url（'https://fonts.googleapis.com/css?family=Montserrat&display=swap');
身体{
字体系列：“蒙特塞拉特”，无衬线；
背景色：黑色；
}
.bg，
.bg过滤器{
位置：固定；
排名：0；
左：0；
最小宽度：100%；
最小高度：100%；
宽度：自动；
高度：自动；
z指数：-100；
}
.bg过滤器{
z指数：-99；
不透明度：0.2；
背景：webkit线性梯度（rgba（49224247,1）0%，rgba（90,77184,1）100%）；
背景：moz线性梯度（rgba（49224247,1）0%，rgba（90,77184,1）100%）；
背景：-o-线性梯度（rgba（49224247,1）0%，rgba（90,77184,1）100%）；
背景：线性梯度（rgba（49224247,1）0%，rgba（90,77184,1）100%）；
}
.头像{
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
}
.顶配标题{
字体系列：“蒙特塞拉特”，无衬线；
左缘：3%；
字体大小：3.2米；
颜色：#fff；
}
.开始{
溢出：隐藏；
字体系列：“蒙特塞拉特”，无衬线；
边界半径：4px；
背景色：透明；
边界：无；
颜色：#FFFFFF；
文本对齐：居中；
字号：28px；
光标：指针；
保证金权利：3%；
}
.开始：聚焦{
大纲：无；
}
.起始跨度{
光标：指针；
位置：相对位置；
过渡：0.5s；
}
.开始时间：之后{
颜色：#31E0F7；
内容：'\00bb'；
位置：绝对位置；
不透明度：0；
排名：0；
右：-20px；
过渡：0.5s；
}
.开始：悬停范围{
右边填充：25px；
}
.开始：悬停范围：之后{
不透明度：1；
右：0；
}
.注册执行{
对齐项目：居中；
}
形式{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}
.模糊{
-webkit过滤器：模糊（5px）；
-moz过滤器：模糊（5px）；
-ms过滤器：模糊（5px）；
-o-滤波器：模糊（5px）；
过滤器：模糊（5px）；
-webkit过渡：所有0.25秒都易于使用；
过渡：所有0.25秒都容易进入；
}
诺布勒先生{
-webkit过滤器：模糊（0px）；
-moz滤波器：模糊（0px）；
-ms过滤器：模糊（0px）；
-o-滤波器：模糊（0px）；
过滤器：模糊（0px）；
-webkit过渡：所有0.25秒都可以轻松过渡；
过渡：所有0.25秒都放松；
}

喜怒无常
我们走吧！
接受使用条件吗？

这实际上与JavaScript或HTML没有多大关系。它是一个CSS属性，用于处理模糊动画（或）的时间

您可以在以下四行中处理转换时间：

.blur{
-webkit过滤器：模糊（5px）；
-moz过滤器：模糊（5px）；
-ms过滤器：模糊（5px）；
-o-滤波器：模糊（5px）；
过滤器：模糊（5px）；
-webkit转换：所有0.1都易于使用；//此处
转换：所有0.1都容易进入；//此处
}
诺布勒先生{
-webkit过滤器：模糊（0px）；
-moz滤波器：模糊（0px）；
-ms过滤器：模糊（0px）；
-o-滤波器：模糊（0px）；
过滤器：模糊（0px）；
-webkit转换：所有的0.1都将释放；//此处
转换：所有的0.1都放松；//在这里
}

您拥有以下价值观：

过渡：所有0.5s缓解；

因此，将其更改为较小的值，如

0.1s

，将加快转换速度。这就是为什么您的转换总是保持相同的速度，因为

transition

CSS属性处理当前元素样式到下一个样式之间的时间

示例：将

blur（5px）

作为当前值，当您将元素样式更改为

blur（0px）

并且元素上存在

transition

属性时，CSS将计算在指定时间

5s

内减少当前值需要多少，最终值将是模糊（0px）。这将模拟模糊动画消失

查看此处，您可以看到它正在工作：

var-vid=document.getElementById（“bgvid”）；
vid.volume=0.01；
var x=document.getElementById（“formregister”）；
var container=document.getElementById（'container'）；
var top_vid=
document.getElementById（'top_vid'）
函数hideShow（）
{
如果（x.style.display==“无”）
{
x、 style.display=“block”；
参阅classList.remove（'noblur'）；
top_vid.classList.remove（'noblur'）；
vid.className+=“模糊”；
top_vid.className+=“模糊”；
}
其他的
{
x、 style.display=“无”；
vid.className+=“noblur”；
top_vid.className+=“noblur”；
vid.classList.remove（'blur'）；
top_vid.classList.remove（'blur'）；
}
}

@导入url（'https://fonts.googleapis.com/css?family=Montserrat&display=swap');
身体{
字体系列：“蒙特塞拉特”，无衬线；
背景色：黑色；
}
.bg，
.bg过滤器{
位置：固定；
排名：0；
左：0；
最小宽度：100%；
最小高度：100%；
宽度：自动；
高度：自动；
z指数：-100；
}
.bg过滤器{
z指数：-99；
不透明度：0.2；
背景：webkit线性梯度（rgba（49224247,1）0%，rgba（90,77184,1）100%）；
背景：moz线性梯度（rgba（49224247,1）0%，rgba（90,77184,1）100%）；
返回