Question

希望是一个简单的...我已经四处寻找，但找不到任何可以解决的问题。

我正在使用隐藏在文档加载上的简单fontawesome图标。如果我没有隐藏它，微调器工作正常，但是，如果我将隐藏类应用于它然后我使用jquery显示图标显示但不再动画，只显示为静态图标。

有没有更好的方法可以取消隐藏此元素以使动画生效？

这里是动画图标的CSS

.icon-spinner {
    display: none;
}
.load-animate {
    -animation: spin .7s infinite linear;
    -webkit-animation: spin2 .7s infinite linear;
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(360deg);}
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg);}
    to { transform: scale(1) rotate(360deg);}
}

这里是BOOTSTRAP按钮内的图标的HTML

<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-spinner load-animate icon-spinner"></i>
Action</button>

这里是根据课程展示图标的方式

$('.icon-spinner').show();

Answer 1

使用span包装图标，然后将icon-spinner类添加到其中。

演示小提琴 - https://jsfiddle.net/ub4xk013/1/

<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="icon-spinner"><i class="fa fa-spinner load-animate"></i></span>
Action</button>

希望有所帮助！

Answer 2

喜欢这个。你的font-awesome不能正常工作。就是这样的情况。在你的项目之后跟踪在线脚本（js）和css的情况下是这样的

＆＃13;

$('.icon-spinner').show();

＆＃13;

.icon-spinner {
    display: none;
}
.load-animate {
    -animation: spin .7s infinite linear;
    -webkit-animation: spin2 .7s infinite linear;
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(360deg);}
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg);}
    to { transform: scale(1) rotate(360deg);}
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-spinner load-animate icon-spinner"></i>
Action</button>

＆＃13;

当用jquery取消隐藏时，fontawesome图标不会旋转

2 个答案: