javascript - 我想在 JS 函数中多次更改 ng-style

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 元素 card-set-menu-nav 将放在 left:100% 然后拉出到 left:50% 之类的。

但它不起作用。它在第一次展开后根本没有移动......可能因为最终结果相同而忽略了转换？

如何在 HTML 元素上应用多个 CSS 过渡？

添加:

考虑到过渡时间，似乎只应用了最后一个过渡。

Answer 1

用两个不同的值一行接一行地覆盖属性对您没有任何好处。只有分配的最后一个才会有任何效果。

如果你想应用一个样式更改，然后在 0.25 秒后应用另一个样式更改，你可以注入(inject) $timeout 服务并使用它:

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