我在Angular应用程序中为一些元素设置动画有问题。 有一个由细胞组成的网格(用ng-repeat生成)。 我想要做的是创建一个简单的动画:单击时,单元格应该消失(例如fadeOut效果)并在一段时间后重新出现。
我设法在this tutorial
之后做了一个fadeOut效果以下是管理单元格的代码:
<div class="col col-20 cell" style="background-image:url('img/gray.png')">
<img class="cell-img" ng-src="{{cells[$index].getSrc()}}" width="100%" ng-click="click(cells[$index])" cell-click/>
</div>
<div class="col col-20 cell" style="background-image:url('img/gray.png')">
<img class="cell-img" ng-src="{{cells[$index + 1].getSrc()}}" width="100%" ng-click="click(cells[$index + 1])" cell-click/>
</div>
<div class="col col-20 cell" style="background-image:url('img/gray.png')">
<img class="cell-img" ng-src="{{cells[$index + 2].getSrc()}}" width="100%" ng-click="click(cells[$index + 2])" cell-click/>
</div>
<div class="col col-20 cell" style="background-image:url('img/gray.png')">
<img class="cell-img" ng-src="{{cells[$index + 3].getSrc()}}" width="100%" ng-click="click(cells[$index + 3])" cell-click/>
</div>
<div class="col col-20 cell" style="background-image:url('img/gray.png')">
<img class="cell-img" ng-src="{{cells[$index + 4].getSrc()}}" width="100%" ng-click="click(cells[$index + 4])" cell-click/>
</div>
</div>
app.controller("Control", function($scope, $interval, ...){
$scope.click = function(cell){
if($scope.gameStarted){
if(cell.isActive){
if(colorOk){
// ...
}
else{
// ...
}
}
}
}
}
答案 0 :(得分:0)
您可以使用$ timeout在隐藏后的一段时间后重新显示该单元格。
类似的东西:
$timeout(function () {
//code to make the cell appear/show the cell (maybe by removing ng-hide class)
}, 1000);