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：

從歷史上看，span元素不能用CSS動畫。爲了給它們製作動畫，你需要給它們一個顯示屬性。顯然顯示：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>