javascript - Angular Animation类中Greensock JavaScript的非平滑补间

"use strict";
angular.module("app", ['ngAnimate'])
  .controller('appCtrl', function($scope, $timeout) {

    $timeout(function() {
      $scope.currentIndex = 0;
    });

    $scope.isCurrentIndex = function(index) {
      return $scope.currentIndex === index;
    }

    $scope.setCurrentIndex = function(index) {
      $scope.currentIndex = index;

    }

  })
  .animation('.navModalCircleTransition', function() {
    return {
      addClass: function(element, className, done) {

        if (className === 'active') {
          TweenMax.set(element, {
            background: "#000000"
          });
          TweenMax.to(element, 1, {
            background: "#C32026",
            onComplete: done
          });

        } else {
          done();
        }
      },
      removeClass: function(element, className, done) {
        if (className === 'active') {
          TweenMax.set(element, {
            background: "#C32026"
          });
          TweenMax.to(element, 1, {
            background: "#000000",
            onComplete: done
          });

        } else {
          done();
        }
      }
    }
  });

.navModalCircleContainer {
  display: flex;
  justify-content: space-between;
  padding: 0 25%;
}
.navModalCircle {
  height: 25px;
  width: 25px;
  border-radius: 100%;
  background: #000000;
}

<div ng-app="app">
  <div ng-controller="appCtrl">

    <div class="navModalCircleContainer">
      <div class="navModalCircle navModalCircleTransition" ng-class="{active: isCurrentIndex(0)}"></div>
      <div class="navModalCircle navModalCircleTransition" ng-class="{active: isCurrentIndex(1)}"></div>
      <div class="navModalCircle navModalCircleTransition" ng-class="{active: isCurrentIndex(2)}"></div>
      <div class="navModalCircle navModalCircleTransition" ng-class="{active: isCurrentIndex(3)}"></div>
      <div class="navModalCircle navModalCircleTransition" ng-class="{active: isCurrentIndex(4)}"></div>
    </div>

    <br />
    <button type="button" ng-click="setCurrentIndex(0)">set currentIndex = 0</button>

    <br />
    <br />


    <button type="button" ng-click="setCurrentIndex(1)">set currentIndex = 1</button>
    <br />
    <br />


    <button type="button" ng-click="setCurrentIndex(2)">set currentIndex = 2</button>
    <br />
    <br />


    <button type="button" ng-click="setCurrentIndex(3)">set currentIndex = 3</button>
    <br />
    <br />


    <button type="button" ng-click="setCurrentIndex(4)">set currentIndex = 4</button>
    <br />
    <br />

  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-animate.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>

  使用此javascript Greensock动画，我的过渡效果并不顺利，我试图弄清楚为什么？这里的问题已大大减少，希望可以直接给出答案。我正在调用navModalCircleTransition角度动画类的addClass和removeClass片段，但是Greensock呈现的过渡并不平滑。奇怪的东西。其他一切工作正常。我以前从未见过这样的东西。我想念什么？

最佳答案

重新发布作为答案。

从TweenMax的CSSPlugin文档中：


  一个常见的错误是忘记使用属性的驼峰表示法...


在这种情况下，将background更改为backgroundColor可解决此问题并按预期进行动画处理。

片段：

"use strict";
angular.module("app", ['ngAnimate'])
  .controller('appCtrl', function($scope, $timeout) {
    $timeout(function() {
      $scope.currentIndex = 0;
    });
    $scope.isCurrentIndex = function(index) {
      return $scope.currentIndex === index;
    }
    $scope.setCurrentIndex = function(index) {
      $scope.currentIndex = index;

    }
  })
  .animation('.navModalCircleTransition', function() {
    return {
      addClass: function(element, className, done) {
        if (className === 'active') {
          TweenMax.to(element, 0.4, {
            backgroundColor: '#C32026',
            onComplete: done
          });
        } else {
          done();
        }
      },
      removeClass: function(element, className, done) {
        if (className === 'active') {
          TweenMax.to(element, 0.4, {
            backgroundColor: '#000000',
            onComplete: done
          });
        } else {
          done();
        }
      }
    }
  });

.navModalCircleContainer {
  display: flex;
  justify-content: space-between;
  padding: 0 25%;
}
.navModalCircle {
  height: 25px;
  width: 25px;
  border-radius: 100%;
  background: #000000;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-animate.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<div ng-app="app">
  <div ng-controller="appCtrl">
    <div class="navModalCircleContainer">
      <div class="navModalCircle navModalCircleTransition" ng-class="{active: isCurrentIndex(0)}"></div>
      <div class="navModalCircle navModalCircleTransition" ng-class="{active: isCurrentIndex(1)}"></div>
      <div class="navModalCircle navModalCircleTransition" ng-class="{active: isCurrentIndex(2)}"></div>
      <div class="navModalCircle navModalCircleTransition" ng-class="{active: isCurrentIndex(3)}"></div>
      <div class="navModalCircle navModalCircleTransition" ng-class="{active: isCurrentIndex(4)}"></div>
    </div>
    <br />
    <button type="button" ng-click="setCurrentIndex(0)">set currentIndex = 0</button>
    <br />
    <br />
    <button type="button" ng-click="setCurrentIndex(1)">set currentIndex = 1</button>
    <br />
    <br />
    <button type="button" ng-click="setCurrentIndex(2)">set currentIndex = 2</button>
    <br />
    <br />
    <button type="button" ng-click="setCurrentIndex(3)">set currentIndex = 3</button>
    <br />
    <br />
    <button type="button" ng-click="setCurrentIndex(4)">set currentIndex = 4</button>
    <br />
    <br />
  </div>
</div>

希望这可以帮助。