Javascript代码中的多个CSS转换

Question

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 variable.

HTML element 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.

Thanks for your help in advance!

Answer 1

您设定的样式的功能openCardSetMenu内，并确保函数被调用和角码两行删除多余的右括号）..

Answer 2

First of all, remove the extra parenthesis ) at the end of the style declarations.

Second: do you really need to use AngularJS? I think you can use CSS transition instead, and "concatenate" transitions with commas and the transition-delay property.

See CSS3 Transitions in W3Schools for more information about transitions.

Answer 3

The css transitions property supports transitions for multiple different properties like so:

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

Now, if you're setting multiple transitions on one element, I would recommend you look at the animation property and setting custom easings. As for implementing these in AngularJS, I'm not super familiar with it, but it seems like you should use ng-style directive

Hope this was helpful!