Начальная загрузка 4.x значок вращающейся группы списка в кнопке при активной

Question

Я пытаюсь заставить значок вращаться внутри кнопки элемента группы начальной загрузки, пока он активен. Моя проблема в том, что я не так хорошо разбираюсь в Js, как в CSS и HTML. Я могу добавить «fa-spin» в класс, чтобы он вращался, но потом он вращается все время. Я хочу, чтобы значки вращались только при активном элементе списка.

<a class="list-group-item list-group-item-action active center" id="list-Dec-list" data-toggle="list" href="#list-Dec" role=tab aria-controls="Dec">
    <i class="fas fa-info fa-spin"></i>
</a>

вот код, с которым я работаю для одного из моих элементов группы списков, остальные точно такие же, за исключением того, что значки разные и идентификаторы разные (очевидно). Спасибо за ваши ответы, и я надеюсь, что у вас будет замечательный день.

Answer 1

Вы можете сделать это без javascript, имея две иконки, одну вращающуюся, другую не вращающуюся, и просто переключая отображение на основе класса active.

HTML:

<a class="list-group-item list-group-item-action active center" id="list-Dec-list" data-toggle="list" href="#list-Dec" role=tab aria-controls="Dec">
    <i class="fas fa-info nospin"></i><i class="fas fa-info fa-spin"></i>
</a>

CSS:

a.list-group-item > .fa-spin { display: none; }
a.list-group-item.active > .fa-spin { display: block; }
a.list-group-item.active > .nospin { display: none; }