如何实现点击添加.active类时触发copy-btn的CSS:focus动画？

嘿，我来帮你搞定这个问题！你需要把动画的触发条件从:focus伪类改成.active类，这样点击按钮添加.active类的时候就能触发动画了，具体修改方案如下：

原来的动画是绑定在:focus伪类上，只有按钮获得焦点（比如点击按住）时才会运行。我们只需要把触发条件换成.active类，就能实现点击添加类时触发动画。

步骤1：修改CSS中的动画触发选择器 #

把.copy-btn:focus:before替换成.copy-btn.active:before，同时给.copy-btn加上position: relative（确保:before的提示文字相对于按钮定位，不会乱跑）：

/* 保留原有样式，只修改以下部分 */
.copy-btn {
    /* 新增这个属性 */
    position: relative;
    /* ...其他原有样式不变 */
}

/* 把:focus换成.active */
.copy-btn.active:before {
    animation-name: copy-btn-animation;
    animation-duration: 1s;
    animation-timing-function: ease;
}

步骤2：优化JS逻辑（可选但推荐） #

当前JS在点击时会给匹配的按钮加.active，但可以简化逻辑，确保每次点击只有当前按钮拥有.active类，避免多个按钮同时激活：

$(".copy-btn").click(function(e) {
    // 先移除所有按钮的active类
    $('.copy-btn').removeClass('active');
    // 给当前点击的按钮添加active类
    $(this).addClass("active");
});

如果希望动画结束后自动恢复按钮样式，可以再加个定时器：

$(".copy-btn").click(function(e) {
    $('.copy-btn').removeClass('active');
    const $currentBtn = $(this);
    $currentBtn.addClass("active");
    // 动画时长1秒，1秒后移除active类
    setTimeout(() => {
        $currentBtn.removeClass('active');
    }, 1000);
});

完整修改后的代码 #

HTML（无需改动） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.12/clipboard.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="copy-btn" data-clipboard-text="CODE1">CODE1</a>
<a href="#" class="copy-btn" data-clipboard-text="CODE2">CODE2</a>
<div class="btn close1">reset</div>

CSS（修改后的完整代码） #

.btn {
    width: 50px;
    height: 20px;
    cursor: pointer;
}
.copy-btn {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    max-height: 125px;
    max-width: 75%;
    margin-right: auto;
    margin-left: auto;
    padding: 15px 5px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px dashed silver;
    color: #54c48a;
    cursor: pointer;
    /* 新增：让:before的绝对定位相对于按钮 */
    position: relative;
}
.active {
    border: 3px solid;
    color: silver;
}
@keyframes copy-btn-animation {
    0% {
        transform: translateY(0rem);
        opacity: 1;
    }
    99% {
        transform: translateY(-1.5rem);
        opacity: 0;
    }
    100% {
        transform: translateY(0rem);
    }
}
.copy-btn:before {
    position: absolute;
    content: "Copied!";
    opacity: 0;
}
/* 修改核心：动画触发从:focus改为.active */
.copy-btn.active:before {
    animation-name: copy-btn-animation;
    animation-duration: 1s;
    animation-timing-function: ease;
}

JS（优化后的完整代码） #

$(document).ready(function() {
    $(".copy-btn").click(function(event) {
        event.preventDefault();
    });

    $('.close1, .close2').on('click', function() {
        $('.copy-btn').removeClass('active');
    });

    var clip = new Clipboard(".copy-btn");

    $(".copy-btn").click(function(e) {
        $('.copy-btn').removeClass('active');
        const $currentBtn = $(this);
        $currentBtn.addClass("active");
        // 可选：动画结束后自动移除active类
        setTimeout(() => {
            $currentBtn.removeClass('active');
        }, 1000);
    });
});

这样修改后，你点击按钮添加.active类时，"Copied!"的动画就会正常触发，而不是只有按住按钮的时候才运行啦～

内容的提问来源于stack exchange，提问作者Kyle Underhill