多個CSS轉換

我的HTML是：多個CSS轉換

<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元素card-set-menu-nav將被放在左側：100％然後被拉出到左側：50％。

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

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

感謝您的幫助提前！

來源

2016-07-30 GyuHyeon Choi

你在樣式聲明結尾處有一個額外的括號''' – LGSon

您設定的樣式的功能內openCardSetMenu，並確保函數被調用，並刪除多餘的右括號）中的角碼都行..

來源

2016-07-30 13:09:24 Aravind

首先，刪除多餘的括號)在樣式聲明的末尾。

第二：你真的需要使用AngularJS嗎？我認爲你可以改用CSS transition，並用逗號和transition-delay屬性「連接」轉換。

請參閱W3School中的CSS3 Transitions以獲取有關轉換的更多信息。

來源

2016-07-30 13:34:57 Davdriver

請不要張貼鏈接到W3Schools（或者根本就不使用它們），參見[here]（http://w3fools.com））作爲解釋 – MayorMonty

@MayorMonty確定，但在這種情況下，該頁面具有良好的功能齊全的示例，可以提供幫助。 – Davdriver

問題是，由於W3Schools是私人策劃的，因此它需要比[MDN]（https://developer.mozilla.org）或[Web Platform Docs]（http：//www.webplatform）更長的更新時間。 org /），它經常落後於規範 – MayorMonty

的CSS屬性transitions支持多個不同性質的轉變，像這樣：

element { 
    transitions: 0.2s left 0.3s color 0.4s 0.8s all 
}

現在，如果你在一個元件上設置多個過渡，我建議你看看animation屬性和設置自定義漸變效果。至於在AngularJS中實現這些，我並不是非常熟悉它，但看起來你應該使用ng-style指令

希望這對我有幫助！

來源

2016-07-30 14:07:32 MayorMonty

回答

相關問題