9

私は AngularJS 1.1.5 を使用しており、daneden の animate.css で ng-animate ディレクティブを試しています。ルーティングを使用していくつかのビューを設定しています。Twitter Bootstrap 3 RC1 を使用しています。

ng-view のコードは次のとおりです。

<div class="container" ng-view ng-animate="{enter:'animated fadeInRightBig', leave:'animated fadeOutLeft'}"></div>

そして、ここにルーティング部分があります：

$routeProvider
    .when('/', {
        templateUrl: '/Home/Home',
        title: 'Home'
    })
    .when('/Home/Home', {
        templateUrl: '/Home/Home',
        title: 'Home'
    })
    .when('/Home/About', {
        templateUrl: '/Home/About',
        title: 'About'
    })
    .otherwise({
        redirectTo: '/'
    });

    $locationProvider.html5Mode(false).hashPrefix('!');

アニメーションが機能し (つまり、アニメーション効果が表示されます)、ビューも変化します。

私が問題を抱えているのは、「入る」ビューがアニメーション化されている間、「出る」ビューがまだスペースを占有しているように見えることです.

その効果は、新しいビューの開始アニメーションが、終了するビューによって以前に占有されていたスペースの下で発生することです。既に「アニメーション化」されているにもかかわらず、古いビューがまだそこにあるかのようです。アニメーションが終了すると、新しいビューが突然適切な位置に急上昇します。入力にはfadeInRightBigを、退出にはfadeOutLeftを使用しています。

これはどのように修正できますか？期待される結果は、こちらのスライド 1 から 3 の ng-switch のアニメーションのように、ぎくしゃくすることなくスムーズに移行することです。（もちろん、ng-viewを使用していることを除いて。）

ありがとう！

編集：

「Enter」アニメーションが実行されている間、「Leave」アニメーションは完全に終了していません。

だから私の質問は少し変わると思います..しかし、期待される結果は同じです。スムーズな「スライド」効果を実現するにはどうすればよいですか?

4

2 に答える 2

5

最初に始めたとき、私は同じ問題を抱えていました。滑らかな効果を実現するには、CSS のタイミングを変更するだけです。animate.css ファイルに移動し、遅延する必要があるものを探します (この場合は、fadeInRightBig になります。遅延を変更します (または、約 1 秒または 2 秒の遅延を追加します)。

もう 1 つの方法は、終了アニメーションの位置を絶対にすることです。

これが役立つかどうか教えてください。それは私のために働いた。angularjs がすでにこれを処理してくれたらいいのにと思います。おそらく、次のバージョンでこれらの問題が解決されるでしょう。

于 2013-08-04T15:15:01.340 に答える