我想改變NG-風格多次在JS功能

Question

我的HTML是：

<nav id="card-set-menu-nav" ng-style="cardSetMenuNavStyle"> 
... 
</nav> 

而且使用AngularJS我的Javascript代碼是這樣的：

$scope.openCardSetMenu = function(cardSet) { 
    $scope.cardSetMenuNavStyle = {'transition':'0.25s', 'left':'100%'}; 
    $scope.cardSetMenuNavStyle = {'transition':'0.25s', 'left':'50%'}; 
}; 

我想實現簡單的側面菜單通過更改$scope.cardSetMenuNavStyle變量。

HTML元素卡集菜單導航將被放在left:100%然後被拉出到left:50%像。

但它不起作用。它在第一次展開之後根本不會移動...可能會忽略轉換，因爲最終結果是相同的？

如何在HTML元素上應用多個CSS轉換？

地址：

考慮到過渡時間，好像只應用於最後一個過渡。

Answer 1

用兩個不同的值覆蓋一個屬性，一行一行之後對你沒有任何好處。只有分配的最後一個纔會有效果。

如果你想申請一個風格上的變化，再後來申請另一0.25秒，你可以注入的$timeout服務並使用它：

$scope.openCardSetMenu = function(cardSet) { 
    $scope.cardSetMenuNavStyle = {'transition':'0.25s', 'left':'100%'}; 
    $timeout(function() { 
     $scope.cardSetMenuNavStyle = {'transition':'0.25s', 'left':'50%'}; 
    }, 250); 
};