GyuHyeon Choi GyuHyeon Choi - 4 months ago 12
CSS Question

I want to change ng-style multiple times in a JS function

My HTML is:

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


And my Javascript code using AngularJS is like:

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


I want to implement simple side menu by changing
$scope.cardSetMenuNavStyle
variable.

HTML element card-set-menu-nav will be put at
left:100%
then be pulled out to
left:50%
like.

But it does not work. It does not move at all after the first unfolding... Maybe transitions are ignored because the final result is the same?

How can I apply multiple CSS transitions on an HTML element?

Add:

Considering the transition time, it seems like only the last transition is applied.

Answer

Overwriting a property with two different values one line after the other will not do you any good. Only the last one assigned will have any effect.

If you want to apply one style change, and then apply another 0.25s later, you can inject the $timeout service and use it:

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