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

【问题标题】：CSS animation not working on span with animate.cssCSS动画不适用于animate.css的跨度
【发布时间】：2016-10-10 08:40:56
【问题描述】：

我在标签内有一个<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>

【问题讨论】：

标签： javascript html css angularjs animate.css

【解决方案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 将是一个更好的选择，并解决问题。

【讨论】：

谢谢！它完美地工作。我不知道跨度。总是乐于学习新事物。

【解决方案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>

【讨论】：