AngularJs动画背景颜色/颜色答案

【问题标题】：AngularJs animate background color / colourAngularJs动画背景颜色/颜色
【发布时间】：2015-02-26 20:12:11
【问题描述】：

我一直在尝试使用 AngularJs 指令和控制器在点击时动态地在 2 种颜色之间为背景设置动画（到目前为止没有成功）。

有人知道怎么做吗？我一直在尝试存储 currCol（存储为推入 ng-class 的数组 var），但是我无法从 ng-class 检索值并使用它。

我已将 css 从清晰过渡到彩色，但我无法弄清楚如何在 2 个动态颜色变量之间进行过渡。任何帮助都会很棒。谢谢。

到目前为止的一些代码：

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;
}

【问题讨论】：

当您按下按钮时，您希望它转换到数组中的下一种颜色，等等？

标签： javascript angularjs colors jquery-animate directive

【解决方案1】：

您不需要为此指定指令，只需使用 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

【讨论】：

这要简单得多，我在尝试使用指令时让它变得太复杂了。这个想法很有效。