CSS动画无法与animate.css一起使用

Question

我在选项卡中有一个<button>和一个<span> 。 我想在将鼠标悬停在按钮上时添加animate.css类。 我正在使用角度来包含它们。

它在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 ：

从历史上看， span元素无法使用CSS进行动画处理。 为了给它们制作动画，你需要给它们一个显示属性 。 显然：块; 会给你带来不良影响，所以分配display：inline-block将是一个更好的选择，并解决问题。

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>