angularjs - AngularJS 的不同转换

Question

如何使用 AngularJS 启用不同的转换。可以说，我的 Web 应用程序中有一个侧边栏。如果用户单击一个按钮 X，侧边栏应该会很快消失，如果用户单击另一个按钮，侧边栏应该会慢慢消失。

我认为，这可以通过在其中一次单击后设置转换选项值，然后更改侧边栏的可见性状态（由转换指令观察）来实现。

但这对我来说似乎有点糟糕。有没有一种通用的方法可以做到这一点？

Answer 1

我会做这样的事情。为侧边栏设置默认过渡，然后应用具有不同过渡速度的类。

这是我的意思的jsFiddle：

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>

角度：

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;

}