Javascript &引用；保留；鼠标悬停前的涟漪效应

我试图重新创造材料设计的涟漪效应。以下是我目前的代码：

$（“html”）.on（“鼠标向下”，“涟漪光”，函数（evt）{
var btnlight=$（evt.currentTarget）；
var xx=evt.pageX-btnlight.offset（）.left；
var yy=evt.pageY-btnlight.offset（）.top；
var持续时间1=2000；
var animationFrame1，animationStart1；
var animationStep1=函数（时间戳1）{
如果（！animationStart1）{
animationStart1=时间戳1；
}
var frame1=timestamp1-animationStart1；
如果（帧1<持续时间1）{
变量测量1=（帧1/持续时间1）*（10-（帧1/持续时间1））；
var circle1=“在“+xx+”px“+yy+”px处的圆圈”；
var color1=“rgba（255,255,255,5）”；
var stop1=99*easing1+“%”；
btnlight.css({
“背景图像”：“径向渐变（“+circle1+”、“+color1+”、“+stop1+”、透明“+stop1+”）
});
animationFrame1=window.requestAnimationFrame（animationStep1）；
}否则{
$（btnlight）.css({
“背景图像”：“无”
});
window.cancelAnimationFrame（animationFrame1）；
}
};
animationFrame=window.requestAnimationFrame（animationStep1）；
});
.btn{
填充：10px 20px；
背景：2 bbad；
颜色：白色；
边界：0；
字体大小：15px；
盒影：0 3px 1px-2px rgba（0,0,0,0.2），0 2px 2px 0 rgba（0,0,0,0.14），0 1px 5px 0 rgba（0,0,0,0.12）；
光标：指针；
边界半径：4px；
大纲：0；
文本转换：大写；
用户选择：无；
过渡：all.2s；
}
.btn:悬停，.btn:焦点{
盒影：0 2px 4px-1px rgba（0,0,0,0.2），0 4px 5px 0 rgba（0,0,0,0.14），0 1px 10px 0 rgba（0,0,0,0.12）；
}
.btn：活动{
盒影：0 5px 5px-3px rgba（0,0,0,0.2），0 8px 10px 1px rgba（0,0,0,0.14），0 3px 14px 2px rgba（0,0,0,0.12）；
}

你好，世界这可以用最少的javascript实现！我希望您能接受99%的css解决方案，因为css提供了很大的灵活性来定制您的动画以满足您的口味-首先，它允许我们使用
transition
属性，该属性自动处理撤消动画，这是您在此处的主要请求

这里是一个纯css示例，其中涟漪总是起源于按钮的左上角；涟漪是一个伪
：：在
元素之后，在其
宽度和
高度属性上设置了
转换


。按钮{
显示：内联块；
位置：相对位置；
背景色：rgba（0,150,0,1）；
填充：15px；
边界半径：5px；
颜色：rgba（255，255，255，1）；
字体大小：200%；
字体系列：monospace；
光标：指针；
溢出：隐藏；
用户选择：无；
}
.按钮：：之后{
内容：“”；显示：块；位置：绝对；
左：0；上：0；
指针事件：无；
背景色：rgba（255、255、255、0.3）；
宽度：0；高度：0；左侧边距：0；顶部边距：0；
边界半径：100%；
过渡：
宽度为500ms的缓进缓出，
高度500ms，易于进出，
留有500ms的余量，便于输入和输出，
边缘顶部500ms缓进缓出；
}
.按钮：活动：：之后{
宽度：500px；高度：500px；
左边距：-250px；上面距：-250px；
}
单击我：D
删除动画时按钮的外观如何？例如，为了让它在一帧中消失，你可以使用
$（“html”）。在（“mouseup”，“ripple light”，evt=>btnlight.css（{backgroundImage:'none'））
Ok，lemme给你一个更详细的问题：1-用户按下鼠标（这会产生涟漪）2-用户仍然按住鼠标（涟漪仍然存在）3-用户向上按鼠标（涟漪消失）你注意到我的代码示例了吗，它在鼠标向下移动时产生涟漪。它应该在鼠标按下时“保持”它的涟漪，并“移除”它在鼠标上的涟漪直到注意到它，您可能需要按住按钮3秒钟。我知道，只要按钮处于
：活动状态，纹波就会持续存在。但是，当按钮不再处于
：活动状态时，您希望以何种动画方式消除纹波？它是否应该在一帧中消失？