如何将CSS链接hover动画的完成状态保存为类，点击时添加到对应元素

解决方案 #

你当前实现的hover效果用的是CSS过渡（transition）而非@keyframes定义的关键帧动画，所以animation-fill-mode属性不会生效，这个属性仅对关键帧动画起作用。可以按照以下步骤实现需求： #

1. 提取激活状态独立类

把hover状态的样式提取为独立的激活类，同时为了保留原有的hover效果，将hover选择器和激活类选择器合并共用样式，新增CSS代码如下：

/* 下划线伪类的hover和激活状态共用样式 */
.link--elara:hover::before,
.link--elara.is-active::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%);
}

/* 文字上浮的hover和激活状态共用样式 */
.link--elara:hover span,
.link--elara.is-active span {
    transform: translate3d(0, -2px, 0);
}

2. 添加点击触发逻辑

补充少量JS实现点击时添加/切换激活类的效果，示例代码如下：

const elaraLinks = document.querySelectorAll('.link--elara');
elaraLinks.forEach(link => {
    link.addEventListener('click', (e) => {
        // 如果是a标签需要阻止默认跳转可放开下面注释
        // e.preventDefault();
        // 需要点击切换效果用toggle，需要点击后永久保持用add
        link.classList.toggle('is-active');
        // link.classList.add('is-active');
    });
});

修改完成后点击链接就会自动添加is-active类，保持动画结束后的最终样式，原有的hover交互效果也不会受影响。

内容的提问来源于stack exchange，提问作者j roc