Javascript 在类中保存完成的css动画

嗨，我有一个链接悬停的css动画，我想能够保存在css类中的动画完成状态，并添加到点击链接

.link {
    cursor: pointer;
    position: relative;
    white-space: nowrap;

}

.link::before,
.link::after {
    position: absolute;
    width: 100%;
    height: 1px;
    background: currentColor;
    top: 100%;
    left: 0;
    pointer-events: none;
}

.link::before {
    content: '';
}


.link--elara {
    font-family: aktiv-grotesk-extended, sans-serif;
    font-size: 1.375rem;
}

.link--elara::before {
    transform-origin: 50% 100%;
    transition: clip-path 0.3s, transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
    clip-path: polygon(0% 0%, 0% 100%, 0 100%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%, 100% 100%, 100% 0%);
}

.link--elara:hover::before {
    transform: translate3d(0, 2px, 0) scale3d(1.08, 3, 1);
    clip-path: polygon(0% 0%, 0% 100%, 50% 100%, 50% 0, 50% 0, 50% 100%, 50% 100%, 0 100%, 100% 100%, 100% 0%);
}

.link--elara span {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
}

.link--elara:hover span {
    transform: translate3d(0, -2px, 0);
}

我尝试过其他解决方案，比如

动画填充模式：转发和其他解决方案，但我没有任何运气

我真的很感激任何帮助。谢谢
 下面的代码可能按照您想要的方式工作，但它不是“在类中保存已完成的动画”

相反，它会在单击时向按钮添加一个类
clicked
。该类具有完成的转换，该转换也发生在hover上，并在光标退出元素时接管


$（文档）.ready（函数（）{
$（“.link--elara”）。单击（函数（e）{
$（“.link--elara”）.addClass（“单击”）；
});
});
.link{
光标：指针；
位置：相对位置；
空白：nowrap；
}
.link：：之前，
.link：：之后{
位置：绝对位置；
宽度：100%；
高度：1px；
背景：彩色；
最高：100%；
左：0；
指针事件：无；
}
.link：：之前{
内容：''；
}
.link--elara{
字体系列：aktiv grotesk扩展，无衬线；
字体大小：1.375rem；
}
.link--elara:：before{
变换原点：50%100%；
变换：剪辑路径0.3s，变换0.3s三次贝塞尔（0.2,1,0.8,1）；
剪辑路径：多边形（0%0%、0%100%、0.100%、0.0、100%0、100%100%、0.100%、0.100%、100%100%、100%0%）；
}
.link--elara:hover:：before，
.点击：：之前{
变换：translate3d（0，2px，0）scale3d（1.08，3，1）；
剪辑路径：多边形（0%0%，0%100%，50%100%，50%0，50%0，50%100%，50%100%，0%100%，100%100%，100%0%）；
}
.link--elara span{
显示：内联块；
变换：变换0.3s三次贝塞尔（0.2,1,0.8,1）；
}
.link--elara:悬停跨度，
.点击span{
变换：translate3d（0，-2px，0）；
}

点击我！
下面的代码可能按照您想要的方式工作，但它不是“在类中保存完成的动画”

相反，它会在单击时向按钮添加一个类
clicked
。该类具有完成的转换，该转换也发生在hover上，并在光标退出元素时接管


$（文档）.ready（函数（）{
$（“.link--elara”）。单击（函数（e）{
$（“.link--elara”）.addClass（“单击”）；
});
});
.link{
光标：指针；
位置：相对位置；
空白：nowrap；
}
.link：：之前，
.link：：之后{
位置：绝对位置；
宽度：100%；
高度：1px；
背景：彩色；
最高：100%；
左：0；
指针事件：无；
}
.link：：之前{
内容：''；
}
.link--elara{
字体系列：aktiv grotesk扩展，无衬线；
字体大小：1.375rem；
}
.link--elara:：before{
变换原点：50%100%；
变换：剪辑路径0.3s，变换0.3s三次贝塞尔（0.2,1,0.8,1）；
剪辑路径：多边形（0%0%、0%100%、0.100%、0.0、100%0、100%100%、0.100%、0.100%、100%100%、100%0%）；
}
.link--elara:hover:：before，
.点击：：之前{
变换：translate3d（0，2px，0）scale3d（1.08，3，1）；
剪辑路径：多边形（0%0%，0%100%，50%100%，50%0，50%0，50%100%，50%100%，0%100%，100%100%，100%0%）；
}
.link--elara span{
显示：内联块；
变换：变换0.3s三次贝塞尔（0.2,1,0.8,1）；
}
.link--elara:悬停跨度，
.点击span{
变换：translate3d（0，-2px，0）；
}

点击我！
非常感谢：）非常感谢：）