没有到达 removeClass 或 addClass 的 angularjs 动画 class 断点

Question

My animation class is not triggering in this codepen. What am I missing? I get to the controller methods fine. I never make it inside the animation class, either addClass or removeClass?

codepen angularjs animation link, same code as here

This is my base animation that I am trying to incorporate into the animation class above.

codepen base animation link, works fine, not the issue

这是设置方式，通过单击每个圆圈，将其激活。它在第一个初始化活动圈。当横幅幻灯片 "active" 处于活动状态时，此时间线将转到带有描边的空心圆圈，当未处于活动状态时，时间线将返回到没有描边的实心填充。

angular.module("appBanner", [])
  .controller('bannerCtrl', function($scope) {

    $scope.slides = ["zero", "one", "two"];

    $scope.currentIndex = 0;
    $scope.currentSlideIndex = "zero";
    $scope.setCurrentSlideIndex = function(index) {
      $scope.currentIndex = index;
      $scope.currentSlideIndex = $scope.slides[$scope.currentIndex];
    }

    $scope.isCurrentSlideIndex = function(slideIndex) {
      return $scope.currentSlideIndex === slideIndex;
    }
    
    
  })
  .animation('.navCircleTransition', function($window) {
    return {
      addClass: function(element, className, done) {
        if (className === 'active') {
          var svgEl = element.find("svg");
          navCircleAnimate(svgEl, "reverse");
        } else {
          done();
        }
      },
      removeClass: function(element, className, done) {
        var scope = element.scope();
        if (className === 'active') {
          var svgEl = element.find("svg");
          navCircleAnimate(svgEl, "reverse");
        } else {
          done();
        }
      }
    }
  });

function navCircleAnimate(el, direction) {
  var tlNavCircle = new TimelineMax({
    paused: true
  });
  tlNavCircle.set($(el), {
    drawSVG: "0% 100%",
    ease: Linear.easeInOut
  });
  tlNavCircle.to($(el), 1, {
    drawSVG: "0% 0%",
    fill: "none",
    ease: Linear.easeInOut
  });

  if (direction === "play") tlNavCircle.play();
  else tlNavCircle.reverse();
}

.navCircleContainer {
  position: absolute;
  display: flex;
  justify-content: space-between;
  padding: 5px;
  bottom: 2.5px;
  left: 12.5%;
  width: 75%;
}

body {
  background: #333;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div ng-app="appBanner" ng-controller="bannerCtrl" class="navCircleContainer">
  <div id="autoNavCircle" class="navCircleTransition" ng-class="{active: isCurrentSlideIndex('auto')}" ng-click="setCurrentSlideIndex(0)">
    <svg id="circle" height="100" width="100">
          <circle cx="50" cy="50" r="45"/>
    </svg>
  </div>

  <div id="autoNavCircle" class="navCircleTransition" ng-class="{active: isCurrentSlideIndex('boatowners')}" ng-click="setCurrentSlideIndex(1)">
    <svg id="circle" height="100" width="100">
          <circle cx="50" cy="50" r="45"/>
    </svg>
  </div>

  <div id="autoNavCircle" class="navCircleTransition" ng-class="{active: isCurrentSlideIndex('commercial')}" ng-click="setCurrentSlideIndex(2)">
    <svg id="circle" height="100" width="100">
          <circle cx="50" cy="50" r="45"/>
    </svg>
  </div>
</div>

Answer 1

忘记在我的模块中包含 ngAnimate。呜....

没有到达 removeClass 或 addClass 的 angularjs 动画 class 断点

Not getting to angularjs animation class breakpoint for removeClass or addClass

javascript

animation

angularjs

gsap