Question

以下代码采用角度1.1.4的工作样本，仅使用新的GreenSock api进行ng-animate。切换功能有效，因为ng-show的行为符合预期，但AppAnimation功能'list-in'和'list-out'不会在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>

Answer 1

<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>

Answer 2

所以我终于解决了..你正在使用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/

最新1.1.5 ng-animate无法使用ng-show

2 个答案: