Fatal编程技术网
  • angularjs/
  • Angularjs 最新1.1.5 ng动画不使用ng show

Angularjs 最新1.1.5 ng动画不使用ng show

angularjs

Angularjs 最新1.1.5 ng动画不使用ng show,angularjs,Angularjs,以下代码来自angular 1.1.4的工作示例，仅使用用于ng animate的新GreenSock api。切换功能正常工作，因为ng show的行为符合预期，但是在ng show上未调用AppAnimation函数“列表输入”和“列表输出” <!DOCTYPE html> <head> <style> .box { color: white; text-align: center; height: 100px; font-size: 86px

以下代码来自angular 1.1.4的工作示例，仅使用用于ng animate的新GreenSock api。切换功能正常工作，因为ng show的行为符合预期，但是在ng show上未调用AppAnimation函数“列表输入”和“列表输出”

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


.box{颜色：白色；文本对齐：居中；高度：100px；字体大小：86px；}
.on{背景色：绿色；}
.off{背景色：红色；}
angular.module（'AppAnimations'，[]）
.animation（'list-out'，['$window'，函数（$window）{
返回{
开始：功能（元素，完成）{
console.log（'list-out'）
TweenMax.set（元素，{position:'relative'}）；
var持续时间=1；
//我们可以使用onComplete：使用TweenMax完成，但是让我们使用
//用于测试目的的延迟值
TweenMax.to（元素，1，{不透明度：0，宽度：0}）；
$window.setTimeout（完成，持续时间*1000）；
}
}
}])
.animation（'list-in'，['$window'，函数（$window）{
返回{
设置：功能（元素）{
TweenMax.set（元素，{opacity:0，width:0}）；
},
开始：功能（元素，完成）{
console.log（'list-in'）
var持续时间=1；
//我们可以使用onComplete：使用TweenMax完成，但是让我们使用
//用于测试目的的延迟值
TweenMax.to（元素，持续时间，{不透明度：1，宽度：210}）；
$window.setTimeout（完成，持续时间*1000）；
}
}
}])
angular.module（'myApp'，['AppAnimations']））
.controller（'MainController'，['$scope'，函数（$scope）{
$scope.toggle=true；
}])
切换！
在…上
关
所以我最终解决了这个问题。。您正在使用
leave/enter
，应该使用
show/hide
。我更新了名字，使之更准确

<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>
工作小提琴：

打开
关
接受了moderndegree的邀请。比你快三分钟。没有拉小提琴，而是先过终点线：）公平地说，我相信他是先回答的。我想他的剪辑是在之后完成的。@musictray他没有打败我，我以3分钟的优势打败了他。我编辑了，有了正确的答案，并且刚刚清理了一些东西。太差劲了。 
angular.module('AppAnimations', [])
  .animation('list-hide', ['$window',function($window) {
 ...
 ).animation('list-show', ['$window',function($window) {

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