[英]AngularJs animate background color / colour
我一直在嘗試使用AngularJs指令和控制器在單擊時對兩種顏色之間的背景進行動態動畫處理(到目前為止沒有成功)。
有誰知道如何做到這一點? 我一直在嘗試存儲currCol(存儲為ng類別中的數組變量),但是后來我無法從ng-class中檢索值並使用它。
我已經從透明到顏色的CSS過渡,但我不知道如何獲得2動態顏色var之間的過渡。 任何幫助都會很棒。 謝謝。
到目前為止的一些代碼:
的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;
}
您不需要為此設置指令,只需使用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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.