Question

＆＃13;

angular.module("modalApp", ['ngAnimate', "ngMaterial", "ngMessages"])
    .controller('modalCtrl', function ($scope) {
		$scope.direction = 'left';
        $scope.currentIndex = 0;
		$scope.init = true;
		$scope.initWizard = function() {
			if($scope.init) {	
				$scope.setCurrentIndex(0);	
			}	
			$scope.init = false;		
		}

        $scope.setCurrentIndex = function (index) {
            $scope.currentIndex = index;
        }
		
        $scope.isCurrentIndex = function (index) {
            return $scope.currentIndex === index;
        }

        $scope.nextModalStep = function () {
            $scope.direction = 'left';
            if($scope.currentIndex < $scope.modalSteps.length - 1) {
				++$scope.currentIndex;
			} 
        }

        $scope.prevModalStep = function () {
            $scope.direction = 'right';
            if($scope.currentIndex > 0) {
				--$scope.currentIndex;
			} 
        }
    })
    .animation('.modalViewAnimation', function () {
        return {
			beforeAddClass: function(element, className, done) {
				var scope = element.scope();
				if (className == 'ng-hide') {
					var elementWidth = element.parent().width();
					startPoint = 0;
					if(scope.direction !== "right") {
						finishPoint = elementWidth;
					} else {
						finishPoint = -elementWidth;
					}
					TweenMax.fromTo(element, 0.5, { left: startPoint}, {x: finishPoint, onComplete: done });
				} else {
					done();
				}
			},
			removeClass: function(element, className, done) {
				var scope = element.scope();
				if (className == 'ng-hide') {
					var elementWidth = element.parent().width();
					finishPoint = 0;
					if(scope.direction !== "right") {
						startPoint = elementWidth;
					} else {
						startPoint = -elementWidth;
					}
					TweenMax.to("section", 0.5, { height: element.outerHeight()});
					TweenMax.fromTo(element, 0.5, { x: startPoint}, {x: finishPoint, onComplete: done, delay:0.25});
				} else {
					done();
				}
			}
        }
	});

＆＃13;

我有一个几乎正常工作的向导滑块。我的问题是在控制器中设置了动画功能后访问方向属性。范围对象在动画内部具有值，但是使用＆＃34; scope.direction＆＃34;检索方向属性的点符号。返回undefined。为什么？任何帮助非常感谢。值得一提的是，我从这个https://github.com/simpulton/angular-photo-slider稍微修改了动画功能，以达到我想要的效果。我无法理解为什么我的scope.direction返回undefined？

Answer 1

不确定原因，但我必须从childHead获取它。对我来说关键是注入rootScope。工作示例：JSFiddle （编辑为＆＃39; tidy＆＃39;我的代码;-)）

＆＃13;

var myApp = angular.module('myApp', ['ngAnimate']);

myApp.controller('myCtrl', function($scope) {
  $scope.onOff = false;
});

myApp.animation('.fold-animation-expand', ['$animateCss', '$rootScope',
  function($animateCss, $rootScope) {
    return {
      enter: function(element, doneFn) {
        console.log("onOff:" + $rootScope.$$childHead.onOff);
        return $animateCss(element, {
          from: {
            "font-size": '0px'
          },
          to: {
            "font-size": '20px'
          },
          duration: 2
        });
      }
    }
  }
]);

＆＃13;

.box {
  height: 100px;
  width: 100px;
  background-color: blue;
  color: white;
  float: left;
}
.box.ng-enter {
  transition: 2s linear all;
  opacity: 0;
}
.box.ng-enter.ng-enter-active {
  opacity: 1;
}

＆＃13;

<html ng-app="myApp">

<head>
  <script src="http://code.jquery.com/jquery-2.2.1.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
  <script src="https://code.angularjs.org/1.5.0/angular-animate.js"></script>
</head>

<body>
  <div ng-controller='myCtrl'>
    onOff state:{{onOff}}
    <br>
    <br>
    <button ng-click="onOff?onOff=false:onOff=true">Run animation</button>
    <hr>

    <div ng-if="onOff == true" class="fold-animation-expand" style="font-size:0px">
      Expanding element
    </div>

    <hr>Example of CSS-based transition
    <br>
    <div ng-if="onOff" class="box">Animated Box</div>

  </div>
</body>

</html>

＆＃13;

无法在动画函数

1 个答案: