Негладкая анимация JavaScript в Greensock в классе угловой анимации

Question

Негладкая анимация JavaScript в Greensock в классе угловой анимации

0

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

Мои переходы не являются гладкими с этой анимацией Greensock javascript, и я пытаюсь понять, почему? Очень сокращенная проблема здесь, надеюсь, простой ответ. Я называю addClass и removeClass фрагментами класса угловой анимации navModalCircleTransition, но переход, созданный Greensock, не является гладким. Странные вещи. Все остальное работает нормально. Раньше я никогда не видел ничего подобного. Что мне не хватает?

John Stafford 31 март 2016, в 23:27

Источник

0

Поршень / скрипка, чтобы повторить проблему, может помочь.
Estus Flask 31 март 2016, в 22:22
1

изменить background на backgroundColor . увидеть это
Tahir Ahmed 01 апр. 2016, в 00:13
0

@Tahir Тахир Ахмед, спасибо. Ты понял. Если вы предоставите ответ, я вам кредит.
John Stafford 01 апр. 2016, в 00:40

Показать ещё 1 комментарий

Теги:

javascript

angularjs

animation

greensock

1 ответ

Ещё вопросы

Поршень / скрипка, чтобы повторить проблему, может помочь.
изменить background на backgroundColor . увидеть это
@Tahir Тахир Ахмед, спасибо. Ты понял. Если вы предоставите ответ, я вам кредит.

Tahir Ahmed · Accepted Answer · 2016-04-01T00-37-00.000Z

Повторная отправка в качестве ответа.

Из документации TweenMax CSSPlugin:

распространенная ошибка заключается в том, чтобы забыть использовать представления верблюжьего случая свойств...

В этом случае изменение background на backgroundColor устраняет проблему и оживляет, как ожидалось.

Snippet:

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

Надеюсь это поможет.

Еще раз спасибо Тахир. Хороших выходных.