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);
};

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

1 个答案: