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将是一个更好的选择,并解决问题.