如何使用css動畫和角色逐個淡入淡出？

我有我想用ng-repeat由一個一個淡出但是動畫淡出整個瓷磚設置一起瓷磚的列表。

這裏是我的CSS

.fade-up { 
    animation: fadeUpIn 5s ease-in-out; 
} 

.fade-in { 
    animation: fadeUpOut 5s ease-in-out; 
} 


@keyframes fadeUpIn { 
    0% { 
    opacity: 0; 
    transform: translate3d(0, 100%, 0); 
    } 

    100% { 
    opacity: 1; 
    transform: none; 
    } 
}

這裏是我的模板：

<div ng-controller="baseController as bCtrl"> 
    <button ng-click="bCtrl.toggleStuff()"> 
    Toggle 
    </button> 
    <div ng-repeat="group in bCtrl.groupList"> 
    <div class="tile-style" 
     ng-repeat="tile in group" 
     ng-class="{'fade-up': bCtrl.display, 'fade-in': !bCtrl.display}"> 
     {{tile}} 
    </div> 
    </div> 
</div>

這裏是我的JS

function toggleStuff() { 
     self.display = !self.display; 
    }

有沒有辦法在個別瓷磚褪色？

來源

2016-06-12 testing

這也能幫助 - http://stackoverflow.com/questions/37699636/css-animation-to-apply-to-elements-one-after-the-other/37699816# 37699816。它不使用Angular，但我想你可以得到想法並將其轉換。 – Harry

ü要以動畫一個接一個，一個簡單的方法是將其設置爲顯示一個接一個，定製NG-動畫可能會導致更多

U可以需要記錄超時和明確的，當循環期間改變發生

for (var i = 0; i < 10; i++) { 
 
    (function(a) { 
 
    setTimeout(function() { 
 
     console.log(a); //0,1,2... 
 
     //$scope.list[a].display = false; 
 
     //$scope.$apply() 
 
    }, i * 1000); 
 
    })(i) 
 
}

來源

2016-06-12 06:57:55

至於對方的回答表明，你可以這樣做增加超時。我已將解決方案應用於您的搶劫者。

http://plnkr.co/edit/RV6E20IP5VLrMDKkOr4G?p=preview

for (var i = 1; i < 26; i++) { 
      tile = { val: i , display: false }; 
      if (i % 4 == 0){ 
       tempList.push(tile); 
       self.groupList.push(tempList); 
       tempList = [] 
      } else { 
       tempList.push(tile); 
      } 
      (function(index, tile) { 
       $timeout(function() { 
       tile.display = true; 
       }, i * 400); 
      })(i, tile); 
      }

來源

2016-06-12 08:03:33

如何使用css動畫和角色逐個淡入淡出？

回答

相關問題