[英]CSS animation not working on span with animate.css
I have a <button>
and a <span>
inside a tab. 我在选项卡中有一个
<button>
和一个<span>
。 I want to add animate.css classes to span when hover over button. 我想在将鼠标悬停在按钮上时添加animate.css类。 I'm using angular to include them.
我正在使用角度来包含它们。
It doesn't work in chrome (it does work in ie): 它在chrome中不起作用(它在ie中起作用):
<div>
<button ng-mouseover="one()" ng-mouseleave="two()">Hover over me</button>
<span ng-class="{animated : zero, bounce : zero}">Animate me</span>
</div>
<script>
function controlTotal($scope) {
$scope.zero = false;
$scope.one = function () {
$scope.zero = true;
};
$scope.three = function () {
$scope.zero = false;
};
};
</script>
Use display:inline-block;
使用
display:inline-block;
with the span: 跨度:
<span style="display:inline-block;"
ng-class="{animated : zero, bounce : zero}">Animate me</span>
Animate.css GitHub : Animate.css GitHub :
Historically, span elements can't be animated with CSS.
从历史上看, span元素无法使用CSS进行动画处理。 In order to animate them, you'll need to give them a display property .
为了给它们制作动画,你需要给它们一个显示属性 。 Obviously display: block;
显然:块; will give you undesirable effects, so assigning display: inline-block would be a better choice, and solve the issue.
会给你带来不良影响,所以分配display:inline-block将是一个更好的选择,并解决问题。
Here is what You need to do: 这是你需要做的:
<button ng-mouseover="one()" ng-mouseleave="two()">Hover over me</button>
<span style="display:inline-block" ng-class="{animated:zero,bounce :zero}">Animate me</span>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.