ngAnimate不再工作了嗎？

我無法獲得簡單的角度動畫。我做了一個簡單的Plunkr顯示它：https://plnkr.co/edit/bKZev3i1WhNgKhsWOZIQ ngAnimate不再工作了嗎？

HTML

<head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="angular.js"></script> 
    <script src="angular-animate.js"></script> 
    <script src="script.js"></script> 
</head> 

<body data-ng-app="myApp"> 
    <div data-ng-controller="myCtrl"> 
    <p class="fade-fx" data-ng-repeat="text in texts">{{ text.text }}</p> 
    </div> 
</body>

CSS

.fade-fx.ng-enter, 
.fade-fx.ng-leave { 
    -webkit-transition: 1s linear all; 
    transition: 2s linear all; 
} 

.fade-fx.ng-enter, 
.fade-fx.ng-leave.ng-leave-active { 
    opacity: 0; 
} 

.fade-fx.ng-leave, 
.fade-fx.ng-enter.ng-enter-active { 
    opacity: 1; 
}

angular.module('myApp', ['ngAnimate']); 
angular.module('myApp') 
    .controller('myCtrl', function($scope) { 
    $scope.texts = [ 
     { 
     text: 'text1' 
     }, 
     { 
     text: 'text2' 
     }, 
     { 
     text: 'text3' 
     } 
    ]; 
    });

事情是我不知道我做錯了什麼。有任何想法嗎？

來源

2016-02-01 jstudios

ngAnimate從來沒有真正奏效。 – LoremIpsum

嘗試添加一個$timeout到您的初始數組初始化。在這裏看到： https://plnkr.co/edit/ZB312BKV8vAD3hYttaXZ?p=preview

angular.module('myApp') 
    .controller('myCtrl', function($scope, $timeout) { 
    $timeout(function() { 
     $scope.texts = [{ 
     text: 'text1' 
     }, { 
     text: 'text2' 
     }, { 
     text: 'text3' 
    }]; 
    }); 
});

編輯：在一個不相關的音符，那將是更清潔切換

.fade-fx.ng-enter, 
.fade-fx.ng-leave { 
    -webkit-transition: 1s linear all; 
    transition: 2s linear all; 
}

到

.fade-fx { 
    -webkit-transition: 1s linear all; 
    transition: 2s linear all; 
}

來源

2016-02-01 17:41:09 Cameron

這樣做！ Plunkr已更新。 – jstudios

從角文件

動畫

。進入 - 當新的項目被添加到列表中或當一個項目是濾波器

.leave後顯示 - 當一個項目被從列表中刪除，或者當一個項目是過濾出

.move - 當相鄰項目被過濾掉導致重排或當項目內容進行重新排序

您需要添加一個搜索過濾器，使查詢在列表中只做出「index.html的」變化

<div data-ng-controller="myCtrl"> 
    <input type="search" ng-model="q" placeholder="Search"> 
    <p class="fade-fx" data-ng-repeat="text in texts | filter:q as results">{{ text.text }}</p> 
</div>

來源

2016-02-01 18:15:29

ngAnimate不再工作了嗎？

回答

相關問題