$ animate addClass無法在角度1.3工作

雖然此演示與角度1.2完美配合，但我無法使其適用於1.3。

http://plnkr.co/edit/r0aAPnTqoBfRFNBwQSpY?p=preview

我讀的更新日誌，並找出了$有生服務有幾個重大更改從1.2到1.3，但我不能讓這個動畫作品。

預期的結果是，dialog div顯示爲zoomIn動畫，但1.3中沒有任何動畫顯示。

的index.html

<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular-animate.min.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
</head> 

<body> 
    <div dialog></div> 
</body> 

</html>

dialog.html

<div class="dialog"> 
    I'm a dialog! 
    <button ng-click="addClass()">Add</button> 
    <button ng-click="removeClass()">Remove</button> 
</div>

的script.js

angular.module("app", ["ngAnimate"]); 

    angular.module("app").directive("dialog", function($animate) { 
     return { 
     replace: true, 
     templateUrl: "dialog.html", 
     link: function(scope, el) { 
      $animate.addClass(el, "open"); 
     } 
     } 
    });

最後的style.css

/* Styles go here */ 

@-webkit-keyframes zoomIn { 
    0% { 
    opacity: 0; 
    -webkit-transform: scale3d(.3, .3, .3); 
    transform: scale3d(.3, .3, .3); 
    } 

    50% { 
    opacity: 1; 
    } 
} 

@keyframes zoomIn { 
    0% { 
    opacity: 0; 
    -webkit-transform: scale3d(.3, .3, .3); 
    transform: scale3d(.3, .3, .3); 
    } 

    50% { 
    opacity: 1; 
    } 
} 

.dialog { 
    display: none; 
} 

.dialog.open { 
    display: block; 
} 

.dialog.open-add { 
    display: block; 
    -webkit-animation-name: zoomIn; 
    -moz-animation-name: zoomIn; 
    -o-animation-name: zoomIn; 
    animation-name: zoomIn; 

    -webkit-animation-duration: 4s; 
    -moz-animation-duration: 4s; 
    -o-animation-duration: 4s; 
    animation-duration: 4s; 
}

您的幫助表示讚賞。

來源

2015-04-06 Tamás Pap

這是一個從文檔

如果沒有CSS轉換或關鍵幀上-add活性或基CSS類中定義，這將被跳過。

您應該將過渡添加不.open-add類，但到.open-add-active

來源

2015-04-06 20:55:48

我試過這種方式，但相同的結果：http://plnkr.co/edit/BSyDaE2Nhvwckk09OLcr?p=preview。如果你有一個工作演示，請鏈接它的答案。謝謝。 –

下面是一個簡單的例子：http://plnkr.co/edit/E6wZM9l25uhlP1wDIDrs?p=preview –

謝謝你的演示。基於它，我能夠修復我自己的版本： http://plnkr.co/edit/uZ0TJrNAiyyQ1R1TXEIo?p=preview –

$ animate addClass無法在角度1.3工作

回答

相關問題