角度动画：点击答案

【问题标题】：Angular animations: on click角度动画：点击
【发布时间】：2015-10-07 12:00:44
【问题描述】：

我在为 Angular 应用程序中的某些元素设置动画时遇到问题。有一个由单元格组成的网格（使用 ng-repeat 生成）。我想做的是创建一个简单的动画：单击时，单元格应该消失（例如淡出效果）并在一段时间后重新出现。

我已经设法在this tutorial 之后做了一个淡出效果

这是管理单元格的代码：

      <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{
          // ...
        }
      }
    }
  }
}

【问题讨论】：

你为什么不简单地使用jQuery来实现你的目标？

标签： javascript angularjs animation

【解决方案1】：

您可以使用 $timeout 让单元格在隐藏一段时间后重新出现。

类似：

$timeout(function () {
    //code to make the cell appear/show the cell (maybe by removing ng-hide class)
  }, 1000);

【讨论】：