Question

我正在使用引导程序图标和 javascript，我想知道如何以动画方式更改图标？

toClipboard: function (refElementName, sender) {
    let btn = $(sender);
    let btnIcon = btn.find("i")

    $("[name='" + refElementName + "']").select()
    document.execCommand("copy")
    
    btn.fadeOut(400)
    btnIcon.attr("class", "bi bi-clipboard-check")
    btn.delay(400)
    btnIcon.attr("class", "bi bi-clipboard")

}

html

<div class="col position-relative">
                                        <textarea name="textObs" rows="5" class="form-control" placeholder="Observações"></textarea>
                                        <a class="btn btn-primary" id="copy" onclick="toClipboard('textObs', this)"><i class="bi bi-clipboard"></i></a>
                                    </div>

我试过了，但它没有按预期工作......动画发生了，但最后按钮没有图标

https://jsfiddle.net/r06s5ctn/

Answer 1

这是您要找的吗？

单击时，淡出图标，然后设置超时以在淡出后更改图标类，然后将图标淡入。

function toClipboard(refElementName, sender) {
    let btn = $(sender);
    let btnIcon = btn.find("i")

    $("[name='" + refElementName + "']").select()
    document.execCommand("copy")
    
    btn.fadeOut(400)
    
    setTimeout(function() {
        btnIcon.removeClass("bi-clipboard").addClass("bi-clipboard-check")
    }, 400)
    
    btn.fadeIn(400)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.4.1/font/bootstrap-icons.min.css">

<div class="col position-relative">
  <textarea name="textObs" rows="5" class="form-control" placeholder="Observações"></textarea>
  <a class="btn btn-primary" id="copy" onclick="toClipboard('textObs', this)"><i class="bi bi-clipboard"></i></a>
</div>

Answer 2

你好！

要更改按钮的图标，您只需要像这样使用 jquery 中的 .html ：

btn.fadeOut(400)
btnIcon.html("<i class="bi bi-clipboard-check"></i>")
btn.delay(400)
btnIcon.attr("<i class="bi bi-clipboard"></i>")

祝您有美好的一天！

更改带有动画的按钮图标

2 个答案: