在 fontawesome SVG 中替换和动画图标

Question

在我切换到 FA SVG 之前，交换图标的工作非常简单——删除旧的 class，添加两个新的。对于 SVG，事情有点复杂，虽然我能够交换图标，但我无法为其设置动画...

HTML

<span id="myButton" class="btn btn-success">
    <i class="fas fa-check fa-fw fa-lg"></i> Click me
</span>

JS

$(document).on("click", "#myButton", function() {
    $(this).find("svg").attr("data-icon", "spinner").removeClass("fa-check").addClass("fa-spinner disabled");
});

我错过了什么？

Answer 1

首先：为了更改数据属性，我建议使用 .data()。

无论如何，您的问题与您忘记添加的 class 有关：fa-spin.

我建议使用 .toggleClass().

而不是添加和删除 classes

片段：

$(document).on("click", "#myButton", function(e) {
    var svg = $(this).find("svg");
    var newIcon = svg.data("icon") == 'check' ? 'spinner' : 'check';
    svg.data("icon", newIcon).toggleClass("fa-check fa-spinner fa-spin disabled");
});

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>


<span id="myButton" class="btn btn-success">
    <i class="fas fa-check fa-fw fa-lg"></i> Click me
</span>

在 fontawesome SVG 中替换和动画图标

Replacing and animating icon in fontawesome SVG

jquery

svg

font-awesome-5