AngularJs设置背景颜色/颜色的动画
AngularJs animate background color / colour
我一直在尝试使用AngularJs指令和控制器在点击时动态制作2种颜色之间的背景动画(到目前为止没有成功)。
有人知道怎么做吗?我一直在尝试存储currCol(存储为推入ng类的数组var),但之后我无法从ng类中检索值并使用它。
我已经将css从clear转换为color,但我不知道如何在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>
控制器.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];
}
}
}])
.方向.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;
}
演示
相关文章:
- jQuery动画-边框宽度和颜色
- 如何用jquery动画改变背景颜色,就像一个过渡
- 我需要在javascript if语句中使用jquery来动画元素的颜色
- 在划桨点击时更改 HTML 画布乒乓动画中圆圈的颜色
- 在 JavaScript 中为其添加动画效果时更改图像颜色
- AngularJs设置背景颜色/颜色的动画
- 使用CSS或SVG设置与背景颜色匹配的文本颜色的动画
- 背景颜色更改时需要动画
- jQuery 在滚动背景上动画颜色不变
- 动画背景颜色,脉冲效果
- 减少jQuery颜色动画的加载时间
- 如何使此更改边框颜色动画停止
- 在paper.js中设置颜色动画
- jQuery颜色动画相对于元素'当前颜色(色调、饱和度、亮度)
- React颜色动画同步
- 如何用渐变颜色动画文本
- 在React Native中设置背景颜色动画
- Jquery计数器与背景颜色动画
- 用tween.js分配颜色动画Three.js
- 悬停时导航的背景颜色动画