Different transitions with AngularJS - angularjs

Question

How can I enable different transitions with AngularJS. Lets Say, I have a sidebar in my web application. I the user clicks a button X, the sidebar should disappear very fast, if the user clicks another button, the sidebar should disappear slow.
I think, this would work by setting a transition option value after one of that clicks and then changing the visibility state of the sidebar (watched by the transition directive).
But that seems a bit like bad style for me. Is there a common way to do this?

Answer 1

I would do something like this. Set a default transition for the sidebar, and then apply a class with a different transition speed.
Here is a jsFiddle of what I mean:
http://jsfiddle.net/rd13/eTTZj/149/
HTML:
<div ng-controller="myCtrl">
<div class="sidebar" ng-class="{'slide-out':boolChangeClass}">
Sidebar
</div>
<button ng-click="click()">Toggle Sidebar</button>
</div>
Angular:
function myCtrl($scope) {
$scope.click = function() {
$scope.boolChangeClass = !$scope.boolChangeClass;
$scope.$apply();
}
}
CSS:
.sidebar {
-moz-transition: left .1s;
-webkit-transition: left .1s;
-o-transition: left .1s;
transition: left .1s;
width: 100px;
background-color: blue;
position: absolute;
top: 0px;
bottom: 0px;
left: -100px;
}
.slide-out {
-moz-transition: left 1s;
-webkit-transition: left 1s;
-o-transition: left 1s;
transition: left 1s;
left: 0px;
}