AngularJS：数据内容更改时滑动+淡入淡出动画（从服务器加载数据）

Question

 I have an application where I load the data using Angular JS ng-repeat.

HTML                                                                                                            

                  <my-card my-details="assignee"
                                 user-map="ctrl.usersMap">
                  </my-card>
                </div>
              </div>
            </div>
          </div>

动画CSS

  .animate-enter,
  .animate-leave
  {
    -webkit-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -moz-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -ms-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -o-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  }

  .animate-enter {
    left: 100%;
  }
  .animate-enter.animate-enter-active {
    left: 0;
  }

  .animate-leave {
    left: 0;
  }

所有数据都在这里水平呈现。

我有一个下一个和上一个按钮，用于从其余服务获取下一个/上一批受理人。我需要设置动画，使其在获取下一批记录时平滑地向左滑动，然后在获取上一批记录时向右滑动。

请看下面的截图： Image-Screenshot