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：

一起使用

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

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

2 个答案: