ng-animate不按預期方式工作

我正在嘗試動畫化將新列表項插入列表的過程。ng-animate不按預期方式工作

繼http://www.nganimate.org/

步驟1中的說明：我建立了一個基類

.animate-enter { 
    -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
     opacity: 0; 
}

第2步：最終狀態建立一個類

.animate-enter.animate-enter-active { 
    opacity: 1; 
}

然而，這並不似乎在動畫什麼。

Plnkr這裏：

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

來源

2015-06-12 runtimeZero

的問題是，NG-動畫內置到1.1.5，而不是你正在使用的版本，這是1.3。如果您使用此版本使用腳本標記（如//code.angularjs.org/X.Y.Z/angular-animate.js），則必須將ngAnimate作爲單獨模塊下載或引用。 See Here

但是here's與您的代碼使用角1.1.5的沉睡者，我添加了一個搜索過濾器，以更好地顯示動畫。我相信你在定義你的動畫類後還缺少一個括號。

此外，您在transtition中的不透明度在您的css之前的函數以及函數之後的all沒有前綴。但只是看起來像一個錯字：

.animate-enter { 
    -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) opacity ; 
    -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) opacity ; 
    -ms-transition 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) opacity ; 
    -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) opacity ; 
    transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) opacity ; 
    opacity: 0; 
}

來源

2015-06-12 20:55:34

除了包括角animate.js腳本到你的頁面，你需要如下注入參考ngAnimate：

var app = angular.module('myApp', ['ngAnimate']);

來源

2015-06-12 22:12:33 VictorR

ng-animate不按預期方式工作

回答

相關問題