温泉Ui＆amp; AngularJs：滑动手势后的延迟功能

Question

我正在使用滑动手势导航到页面/模板。 如果我向左滑动，我想淡出/淡出5秒钟。 如果我向右滑动，我想淡入/淡出通道5秒钟。

淡出like-col或pass-col后，两个手势都应导航到模板match1.html。

目前，这些列在5秒后不久出现，并直接进入模板match1.html

我做错了什么？感谢您的提示。

var app = angular.module('myApp', ['onsen', 'ngSanitize', 'ngRoute', 'onsen.directives', 'ngTagsInput']);
app.controller('findPatientsController', function($scope, $route, $window, $timeout) {

  $scope.startFindPatient = function() {
    $timeout(function() {
      findPatientsNavigator.pushPage('match1.html', {
        animation: 'slide'
      });
    }, 1000);
  };

  $scope.swipe = {
    active: false
  };

  $scope.onGestureMatch1 = function(gesture) {
    if (gesture == 'Swipe Left') {
      console.log('like');
      $scope.swipe.like = !$scope.swipe.like;

      $timeout(function() {
        findPatientsNavigator.pushPage('match2.html', {
          animation: 'slide'
        });
      }, 5000);

    }
    if (gesture == 'Swipe Right') {
      console.log('pass');
      $scope.swipe.pass = !$scope.swipe.pass;

      $timeout(function() {
        findPatientsNavigator.pushPage('match2.html', {
          animation: 'slide'
        });
      }, 5000);
    }
  }

});

<ons-navigator animation="slide" ng-controller="findPatientsController" var="findPatientsNavigator">
  <ons-page id="introFindPatientsPage">
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button ng-click="slidingMenu.toggleMenu()">
          <ons-icon icon="bars"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">
        Schnellsuche
      </div>
    </ons-toolbar>
    <ons-gesture-detector ng-swipeleft="onGestureStart('Swipe Left')" ng-swiperight="onGestureStart('Swipe Right')">
      <div id="detect-area" style="width: 100%; height: 500px;">
        <div class="searchInfo" ng-init="startFindPatient()">

          <span class="searchText"><i class="fa fa-search"></i> Search...</span>

        </div>
      </div>
    </ons-gesture-detector>
  </ons-page>

  <ons-template id="match1.html">
    <ons-page id="match1Page">
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button ng-click="slidingMenu.toggleMenu()">
            <ons-icon icon="bars"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">
          Neuer Match
        </div>
      </ons-toolbar>
      <ons-gesture-detector ng-swipeleft="onGestureMatch1('Swipe Left')" ng-swiperight="onGestureMatch1('Swipe Right')">
        <ons-row class="swipeRow">
          <ons-col width="80px" ng-show="swipe.like" class="like-col col ons-col-inner">
            <div class="info-unit">
              <ons-icon icon="fa fa-star fa-likePass"></ons-icon>
            </div>
          </ons-col>
          <ons-col class="id-col col ons-col-inner">
            <div class="newMatch-id">peterson</div>
            <div class="newMatch-birthdate">40 Jahre</div>
          </ons-col>
          <ons-col width="80px" ng-show="swipe.pass" class="pass-col col ons-col-inner">
            <div class="info-unit">
              <ons-icon icon="fa fa-times fa-likePass"></ons-icon>
            </div>
          </ons-col>
        </ons-row>
        <div class="newMatch">
          <div ng-controller="GaugeController">
            <div gauge-chart percent="matchGauge1"></div>
          </div>
          <ons-row>
            <div class="matching-list-item-container">
              <div class="heading-matching-list"><i class="fa fa-stethoscope"></i> Übereinstimmungen</div>
              <div ng-controller="tagsMatchingController" class="matchingTag">
                <div class="tags">
                  <ul class="tag-list">
                    <li class="tag-item">
                      <span class="ng-binding">Radiusfraktur</span>
                    </li>
                    <li class="tag-item">
                      <span class="ng-binding">Karpaltunnelsyndrom</span>
                    </li>
                    <li class="tag-item">
                      <span class="ng-binding">Ulnarisrinnen-Syndrom</span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
        </div>
        </ons-row>
      </ons-gesture-detector>
    </ons-page>
  </ons-template>

  <ons-template id="match2.html">
    <ons-page id="match2Page">
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button ng-click="slidingMenu.toggleMenu()">
            <ons-icon icon="bars"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">
          Neuer Match
        </div>
      </ons-toolbar>
      <ons-gesture-detector ng-swipeleft="onGestureMatch2('Swipe Left')" ng-swiperight="onGestureMatch2('Swipe Right')">
        <div class="newMatch">
          <div class="newMatch-id">findus</div>
          <div class="newMatch-birthdate">32 Jahre</div>
          <div ng-controller="GaugeController">
            <div gauge-chart percent="matchGauge2"></div>
          </div>
          <ons-row>
            <div class="matching-list-item-container">
              <div class="heading-matching-list"><i class="fa fa-stethoscope"></i> Übereinstimmungen</div>
              <div ng-controller="tagsMatchingController" class="matchingTag">
                <div class="tags">
                  <ul class="tag-list">
                    <li class="tag-item">
                      <span class="ng-binding">Radiusfraktur</span>
                    </li>
                    <li class="tag-item">
                      <span class="ng-binding">Ulnarisrinnen-Syndrom</span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
        </div>
        </ons-row>
      </ons-gesture-detector>
    </ons-page>
  </ons-template>


</ons-navigator>