2

AngularJS でさまざまなトランジションを有効にするにはどうすればよいですか。たとえば、Web アプリケーションにサイドバーがあるとします。ユーザーがボタン X をクリックすると、サイドバーは非常に速く消えます。ユーザーが別のボタンをクリックすると、サイドバーはゆっくりと消えます。

これは、いずれかのクリックの後にトランジション オプションの値を設定し、サイドバーの表示状態を変更することで機能すると思います (トランジション ディレクティブによって監視されます)。

しかし、それは私にとって少し悪いスタイルのようです. これを行う一般的な方法はありますか？

4

1 に答える 1

5

私はこのようなことをします。サイドバーのデフォルトのトランジションを設定してから、異なるトランジション速度のクラスを適用します。

これが私が言いたいことの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;

}
于 2013-06-14T13:02:30.943 に答える