2

簡単なjQueryのslideUp/slideDownを使用して、Angular（バージョン1.3.2）のng-showで表示されるTwitterブートストラップパネル本体の開閉をアニメーション化しようとしています。

（最初はcssトランジションでやってみたのですが、身長が不明でできず、最大高さのアニメーションで閉じるのに問題があったので、JSで行くことにしました）

アニメーションの作成には成功しましたが、最初のアニメーションの切り替え時に動作しません。したがって、最初の体の表示はアニメーション化されず、次に非表示がアニメーション化され、その後はすべて問題ありません (アニメーションの表示と非表示の両方)。

Javascript 部分:

app.animation('.animate-panel-body-slide', function(){
return {
    addClass : function(element, className, done) {
        $(element).slideUp(400, done);
        return function(isCancelled) {
            if(isCancelled) {
                $(element).stop();
            }
        }
    },
    removeClass : function(element, className, done) {
        $(element).slideDown(400, done);
        return function(isCancelled) {
            if(isCancelled) {
                $(element).stop();
            }
        }
    }
}
});

HTML 部分:

<div class="panel panel-default">
    <div class="panel-heading">
        HEADING
    </div>
    <div class="panel-body animate-panel-body-slide" ng-show="isPanelOpen">
        SOME HTML IN BODY...
    </div>
</div>

何か不足していますか？

4

1 に答える 1

3

がremoveClass実行されるのは、ng-hide( which を設定するdisplay: none) が要素から削除されたためです。

これdisplay: blockは、要素がすぐに表示され、slideDownアニメーションが表示されないことを意味します。

パネルを閉じると、slideUpアニメーションがstyle="display: none;"要素に追加されます。これは、次にパネルを開いたときに期待どおりに機能することを意味します。

次のように手動で追加する場合：

<div class="panel-body animate-panel-body-slide" ng-show="isPanelOpen" style="display: none">

パネルが常に閉じている限り、機能します。

両方のケースで機能させたい場合は、これを追加できます。

removeClass: function(element, className, done) {

  element.css('display', 'none');
  element.slideDown(400, done);

  ...
于 2014-11-23T16:23:07.757 に答える