animations - Diferentes transiciones con AngularJS

angularjs ng hide animation

Question

¿Cómo puedo habilitar diferentes transiciones con AngularJS? Digamos, tengo una barra lateral en mi aplicación web. Si el usuario hace clic en un botón X, la barra lateral debería desaparecer muy rápido, si el usuario hace clic en otro botón, la barra lateral debería desaparecer lentamente.

Creo que esto funcionaría estableciendo un valor de opción de transición después de uno de esos clics y luego cambiando el estado de visibilidad de la barra lateral (observada por la directiva de transición).

Pero eso me parece un poco mal estilo. ¿Hay una manera común de hacer esto?

Answer 1

Haría algo así. Establezca una transición predeterminada para la barra lateral y luego aplique una clase con una velocidad de transición diferente.

Aquí hay un jsFiddle de lo que quiero decir:

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;

}