1

ng-show で ng-animate ディレクティブを使用できるように、v 1.1.4 を使用しています。

アプリの一部でフェードがうまく機能していますが、パネル内のスライドを動作させるのに少し問題があります。

私が「右：0;」を取ると targetDiv から外れると、うまくスライドしますが、アニメーションが完了すると、画面の左側にジャンプします (予想どおり、完了時にクラスが削除されるため)。

しかし、「right: 0;」のままにしておくと、.targetDiv では、アニメーションは実行されず、スライドするのではなく、単に div を表示するだけです。

フィドルをまとめましたが、1.1.4 の CDN バージョンでは動作しないようです

どんな助けでも大歓迎です！

CSS

.slideFromRight-show-setup {
  -moz-transition:all 0.5s ease-in-out;
  -webkit-transition:all 0.5s ease-in-out; 
  transition:all 0.5s ease-in-out;
}

.slideFromRight-show-setup {
  right: -100%;
}

.slideFromRight-show-setup.slideFromRight-show-start {
  right: 0;
}

.targetDiv {
  position: absolute;
  right: 0;
  width: 50%;
  height: 100%;
  background-color: red;
}

HTML

<div class="targetDiv" ng-show="detailPanel.visible" ng-animate="'slideFromRight'">Content</div>
4

3 に答える 3

2

ng-animate ディレクティブは、デフォルトを持たない CSS プロパティではうまく機能しないことがわかりました。不透明度 (デフォルトの不透明度は 100%) ではうまく機能しますが、絶対に配置された右では機能しません。 0; 右のように、デフォルトの状態では 0 ではありません。

ng-animate の JS と CSS3 の両方の部分 ( http://code.angularjs.org/1.1.4/docs/api/ng.directive:ngAnimate ) を使用すると、クラスを追加するために汚いハックを行うことができます。完了後、非表示時に削除:

myApp.animation('slideFromRight-show', function() {
  return {
    setup : function(element) {
    },
    start : function(element, done, memo) {
      var timer = setTimeout(function(){
        element.addClass("opened");
        done();
      }, 500);
    }
  };
});

myApp.animation('slideFromRight-hide', function() {
  return {
    setup : function(element) {
      element.removeClass("opened");
    },
    start : function(element, done, memo) {
      var timer = setTimeout(function(){
        done();
      }, 500);
    }
  };
});

これは汚いと感じます。誰かがより良い答えを思いつくことができれば、それはエースになるでしょう-しかし、これは私が現在構築しているプロトタイプで機能します.

于 2013-05-07T14:02:20.563 に答える