CSS 动画不适用于 animate.css 的跨度

Question

我在选项卡中有一个 <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>

Answer 1

将 display:inline-block; 与跨度一起使用：

<span style="display:inline-block;" 
    ng-class="{animated : zero, bounce : zero}">Animate me</span>

Animate.css GitHub:

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.

Answer 2

这是您需要做的：

<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>

CSS 动画不适用于 animate.css 的跨度

CSS animation not working on span with animate.css

html

javascript

css

angularjs

animate.css