我有一个 <button>
和一个 <span>
在选项卡内。我想在将鼠标悬停在按钮上时添加 animate.css 类以进行跨越。我正在使用 Angular 来包含它们。
它在 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>
最佳答案
将 display:inline-block;
与跨度一起使用:
<span style="display:inline-block;"
ng-class="{animated : zero, bounce : zero}">Animate me</span>
Historically, span elements can't be animated with 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.
关于javascript - CSS 动画不适用于 animate.css 跨度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37730284/