2

次のコードは、ng-animate の新しい GreenSock API のみを使用して、angular 1.1.4 の作業サンプルから採用されています。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>
4

2 に答える 2

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>
于 2013-06-27T03:06:14.200 に答える
0

だから私は最終的にそれを解決しました..あなたは使用しており、使用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-27T03:03:05.860 に答える