0

ルートが変更されたときにラッパーに特定のクラスを追加して、トリガーされる CSS アニメーションを制御できるようにしたいと考えています。

私はそのようにしようとしています: http://plnkr.co/edit/KRwBFb6bCTkit9eKg8yb?p=preview

$rootScope.$on( "$routeChangeSuccess", function(event, next, current) {
   //Code to skip animation on the first load/page
    if( 'undefined' === typeof current || $scope.pageClass == '' ) return false;


    var elem = document.querySelector("#wrapper");
    var viewElem = angular.element(elem);

    $animate.addClass(viewElem, $scope.pageClass).then(function(){
        $animate.removeClass(viewElem, $scope.pageClass);
    });
});

しかし、クラスは追加されません。この関数を間違った方法で使用していますか?

4

1 に答える 1

1

コードが行っていることは、要素に正しい CSS クラスを追加し、#wrapper追加された直後にそれを削除することです。関数 (クラスを削除するために使用している)によって返される promise はaddClass、クラスによって定義されたアニメーションが完了したときではなく、クラスが追加されたときに解決されます。

アニメーションの完了後に CSS クラスを削除し#wrapperて、次のアニメーションのために CSS クラスをリセットできるようにする場合は、enter代わりにコードをイベントにバインドする必要があります。次のようなもの：

$animate.on('enter', angular.element(document.querySelector("#wrapper")),
     function callback(element, phase) {
       if (phase === 'close') {
         $animate.removeClass(angular.element(document.querySelector("#wrapper")), 'RL');
         $animate.removeClass(angular.element(document.querySelector("#wrapper")), 'LR');
       }
     }
  );
于 2015-06-11T11:13:34.530 に答える