表示されたページを制限するときのページ区切りの問題

Question

私はページ付けする必要のある大きなデータリストを扱っています。ページネーションは機能していますが、飛び越しボタンと戻るボタンの表示と追加のページ数を制限するように要求されています。一度に5ページを表示し、ページカウンタを調整して2つの上位ページと2つの下位ページのみを表示したいとします。たとえば、私がページ4にいる場合、私はページャーに2,3,4,5,6を表示させたいだけです。だからここに私の問題のgifがあります。

See how the pager shows the page out of range for a second before it disappears?

ここで改ページを作成するコードです。

var pagenate = function (page, totalPages) { 
     maxShownPage = page + 2; 
     minShownPage = page - 2; 
     pageCount = []; 

     if (minShownPage <= 1 && maxShownPage <= totalPages) { 
      minShownPage = 1; 
      maxShownPage = 5; 
     } 
     if (maxShownPage > totalPages) { 
      maxShownPage = totalPages; 
      minShownPage = totalPages - 4; 
     } 

     for (i = minShownPage; i <= maxShownPage; i++) { 
      pageCount.push(i); 
     } 

    }; 

次にAngularJSメソッドの内部で、このようなページネーションメソッドを呼び出します。

   howManyPages = Math.ceil(visits.SurveyCount/pageSize); 
       pagenate(page, howManyPages); 
       $scope.pages = pageCount; 

ページの表示が消えてしまわないように助けてください。

ありがとうございました。

Answer 1

角度アニメーションを使用しているため、問題が発生していると思います。 .ng-enter, .ng-enter-active, .ng-leave, .ng-leave-activeクラスではフェージングが発生しているので、移行前の番号が表示されます。これらのクラスのためにオリジナルの機能をオーバーライドするために特別にCSSを作成することをお勧めします。

あなたのCSSを見ずに何をすべきかを正確に伝えるのは難しいですが、私はこれらのトランジション中に何も起こっていないことを確認するだけです。これは、現在そのクラスにあるもの（不透明度、アニメーションの長さなど）を何もしないバージョンで上書きすることを意味します。