Different transitions with 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

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;

}