latest 1.1.5 ng-animate不適用於ng-show

下面的代碼是針對angular 1.1.4的工作示例採用的，只使用新的GreenSock api生成ng-animate。切換功能起作用，因爲ng-show的行爲與預期相同，但是在ng-show上不會調用AppAnimation函數的「列表輸入」和「列出」功能。latest 1.1.5 ng-animate不適用於ng-show

<!DOCTYPE html> 
<head> 
    <style> 
    .box { color: white; text-align: center; height: 100px; font-size: 86px; } 
    .on { background-color: green; } 
    .off { background-color: red; } 
    </style> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script> 
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.7/TweenMax.min.js"></script> 
    <script> 
     angular.module('AppAnimations', []) 
     .animation('list-out', ['$window',function($window) { 
     return { 
      start : function(element, done) { 
      console.log('list-out') 
      TweenMax.set(element, {position:'relative'}); 

      var duration = 1; 
      //we can use onComplete:done with TweenMax, but lets use 
      //a delay value for testing purposes 
      TweenMax.to(element, 1, {opacity:0, width:0}); 
      $window.setTimeout(done, duration * 1000); 
      } 
     } 
     }]) 

     .animation('list-in', ['$window',function($window) { 
     return { 
      setup: function(element) { 
      TweenMax.set(element, {opacity:0, width:0}); 
      }, 
      start : function(element, done) { 
      console.log('list-in') 
      var duration = 1; 
      //we can use onComplete:done with TweenMax, but lets use 
      //a delay value for testing purposes 
      TweenMax.to(element, duration, {opacity:1, width:210}); 
      $window.setTimeout(done, duration * 1000); 
      } 
     } 
     }]) 

     angular.module('myApp', ['AppAnimations']) 
     .controller('MainController', ['$scope', function($scope) { 
      $scope.toggle = true; 
     }]) 
    </script> 

    </head> 
    <body ng-app="myApp" ng-controller="MainController"> 
    <button ng-click="toggle = !toggle">Toggle!</button> 

     <div class="box on" ng-show="toggle" ng-animate="{leave:'list-out', enter:'list-in'}">On</div> 
     <div class="box off" ng-hide="toggle" ng-animate="{leave:'list-out', enter:'list-in'}">Off</div> 


    </body> 
    </html>

來源

2013-06-27 musictray

<div class="box on" ng-show="toggle" ng-animate="{show: 'list-in', hide: 'list-out'}">On</div> 
<div class="box off" ng-hide="toggle" ng-animate="{show: 'list-in', hide: 'list-out'}">Off</div>

來源

2013-06-27 03:06:14

doh ...只是錯過了它 –

完美。謝謝。盯着那一個小時.... – musictray

所以我終於解開了它..你正在使用leave/enter，應使用show/hide。我更新了名字，以使PC更加正確。

<div class="box on" ng-show="toggle" ng-animate="{hide:'list-hide', show:'list-show'}">On</div> 
<div class="box off" ng-hide="toggle" ng-animate="{hide:'list-hide', show:'list-show'}">Off</div>

angular.module('AppAnimations', []) 
    .animation('list-hide', ['$window',function($window) { 
... 
).animation('list-show', ['$window',function($window) {

工作小提琴：http://jsfiddle.net/ncapito/CTfL8/

來源

2013-06-27 03:03:05 Nix

給moderndegree的接受。打你三分鐘。沒有做小提琴，並首先衝過終點線:) – musictray

平心而論，我相信他先回答了。我認爲他的編輯來之後。 –

...但他已經有比我更多的代表;） –

latest 1.1.5 ng-animate不適用於ng-show

回答

相關問題