AngularJs animate background color/color

Я пытаюсь динамически оживить фон между двумя цветами при нажатии с помощью AngularJs Directives и Controllers (пока что успеха нет).AngularJs animate background color/color

Кто-нибудь знает, как это сделать? Я пытаюсь сохранить currCol (хранится в виде массива var, помещенного в ng-класс), но тогда я не могу извлечь значение из ng-класса и использовать его.

У меня css перешел от четкого к цвету, но я не могу понять, как получить переход между двумя динамическими цветными варами. Любая помощь будет отличной. Благодарю.

Некоторые код до сих пор:

index.html

<body ng-app="colourTest"> 
     <div ng-controller="BgCtrl" > 
      <ion-nav-bar id="bgCont" data-mylo-color="" ng-class="colorVal" animate-On-Change="colorVal" ></ion-nav-bar> 
      <ion-nav-view animation="slide-left-right"> 
       <button ng-click="test3()">set bg</button>   
      </ion-nav-view> 
     </div> 
    </body>

controllers.js

.controller('BgCtrl', ['$scope', function ($scope) { 
    $scope.colorPane = 'whiteBg'; 
    $scope.colorVal = ''; 
    var colCount = 0; 
    var colorArr = ['redBg', 'greenBg', 'blueBg', 'whiteBg']; 
    var currColor = '';  

    $scope.test3 = function() {   
     if (colCount < colorArr.length) 
     { 
      $scope.colorVal = colorArr[colCount];    
      colCount ++;  
     } else { 
      colCount = 0; 
      $scope.colorVal = colorArr[colCount]; 
     } 
    } 
}])

.directives.js

.directive('animateOnChange', ['$animate', function($animate) { 

    return function (scope, elem, attrs) { 
    //var container = angular.element(document.querySelector('#bgCont'));  
    //var currCol = container[0].attributes[1]; 
    scope.$watch(attrs.animateOnChange, function (nv, ov) { 

     //var colVar = attrs.ngClass; 
     //colVar = nv;   
    }); 
    }; 
}]);

app.css

.greenBg { 
    transition: background-color 1s ease; 
    background-color: #00ff00; 
} 
.redBg { 
    transition: background-color 1s ease; 
    background-color: #ff0000; 
}

источник

2015-02-26 cuznerdexter

При нажатии на кнопку, вы хотите, чтобы перейти к следующему цвету в массиве, и так далее? – tasseKATT

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

.greenBg-add, .greenBg-remove, 
.redBg-add, .redBg-remove, 
.blueBg-add, .blueBg-remove, 
.whiteBg-add, .whiteBg-remove { 
    transition: background-color 1000ms linear; 
} 

.greenBg, 
.greenBg-add.greenBg-add-active { 
    background-color: #00ff00; 
} 
.redBg, 
.redBg-add.redBg-add-active { 
    background-color: #ff0000; 
} 
.blueBg, 
.blueBg-add.blueBg-add-active { 
    background-color: #0000ff; 
} 
.whiteBg, 
.whiteBg-add.whiteBg-add-active { 
    background-color: #ffffff; 
}

Demo

источник

2015-02-26 21:24:38 MamaWalter

Это намного проще, я делал это слишком сложно, пытаясь использовать директиву. Эта идея отлично поработала. – cuznerdexter

AngularJs animate background color/color

ответ

Смежные вопросы