角度動畫：點擊

Question

我在Angular應用程序中為一些元素設置動畫有問題。 有一個由細胞組成的網格（用ng-repeat生成）。 我想要做的是創建一個簡單的動畫：單擊時，單元格應該消失（例如fadeOut效果）並在一段時間后重新出現。

我已經設法在本教程之后做了一個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{
          // ...
        }
      }
    }
  }
}

Answer 1

您可以使用$ timeout使單元格在隱藏后的某個時間后重新出現。

就像是：

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