Question

我写了一个名为＆＃39; cardViewer＆＃39;的角度指令，它可以用动画显示其中的图像。

按＆＃34; prev＆＃34;按钮，图像向左滑动。按下＆＃34; next＆＃34;按钮，图像向右滑动。

我尝试使用ng-switch执行此操作，.ng-enter仅支持.ng-leave和ng-class动画类。但是我需要两种方式进入（从左和右进入），两种方式离开（左和右）。

所以我尝试toLeft来解决这个问题。我希望它可以在切换之前添加<h1>hahaha</h1> <div> <button ng-click='prev()'>prev</button> <button ng-click='next()'>next</button> </div> <div>current Card Index: {{displayCard}}</div> <div class="card-container" ng-switch="displayCard"> <img class="card" src="http://i.imgur.com/EJRdIcf.jpg" ng-switch-when="1" ng-class="{'toLeft': toLeft, 'toRight': toRight}"/> <img class="card" src="http://i.imgur.com/StaoX5y.jpg" ng-switch-when="2" ng-class="{'toLeft': toLeft, 'toRight': toRight}"/> <img class="card" src="http://i.imgur.com/eNcDvLE.jpg" ng-switch-when="3" ng-class="{'toLeft': toLeft, 'toRight': toRight}"/> </div>类，因此它可以应用特定的css动画。

但似乎行不通。当我按下＆＃34; next＆＃34;按钮两次，它工作正常。但是当我按下＆＃34; next＆＃34;，然后按＆＃34; prev＆＃34;，新图像进入正确的方向，但旧图像离开的方向错误。

我的指示模板：

angular.module('app', ['ngAnimate'])
  .directive('cardViewer', function() {

  return {
    templateUrl: 'cardViewer.html',
    link: function(scope, element, attr) {
      scope.toLeft = false;
      scope.toRight = false;

      scope.displayCard = 1;

      //when press prev, card slide to left
      scope.prev = function() {
        scope.toLeft = true;
        scope.toRight = false;
        if (scope.displayCard == 1) {
          scope.displayCard = 3
        } else {
          scope.displayCard -= 1;
        }
      };

      //when press prev, card slide to right
      scope.next = function() {
        scope.toLeft = false;
        scope.toRight = true;

        if (scope.displayCard == 3) {
          scope.displayCard = 1
        } else {
          scope.displayCard += 1;
        }
      };
    }
  }
});

指令：

.card-container {
  position: relative;
  height: 500px;
  overflow: hidden;
}
.card {
  width: 100%;
  position: absolute;
}

.card.ng-animate {
  transition: 1s linear all;
}

.card.ng-enter.toLeft {
  left: 100%;
}
.card.ng-enter-active.toLeft {
  left: 0;
}
.card.ng-leave.toLeft {
  left: 0;
}
.card.ng-leave-active.toLeft {
  left: -100%;
}

.card.ng-enter.toRight {
  left: -100%;
}

.card.ng-enter-active.toRight {
  left: 0;
}

.card.ng-leave.toRight {
  left: 0;
}

.card.ng-leave-active.toRight {
  left: 100%;
}

的CSS：

<center><img src="images/plswait.gif" alt="what image shows" height="50" width="50" ng-show="show===5" ></center>

**js**


      app.controller('listingdetailController', function ($http, $scope, $compile, $filter, $sce) {

        var SearchTxt = 'cay';
        var url = encodeURI("http://www.yahoo.com");
         var page = gallery.getCurrentPage();
         var FkCategory = page.options.params;
         var lat='';
         var lng = '';
         var img = '';
         var title = '';
          var phone = '';
         var web  = '';
         var email = '';
         $scope.show5 = true;




//         console.log("===iside details======"+FkCategory);
         $scope.img = "http://caymanafterwork.netcluesdemo.com/cache/business/images/337_224/papagallo1438959641.jpg";

        $http({
            method: 'POST',
            url:  API_HOST+'/webservice/listingdetail',
            headers:
                    {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'caymanauth': caymanauth
                    },
            data: "&Catid=" + FkCategory + "&SearchTxt=" + SearchTxt,
            contentType: 'application/x-www-form-urlencoded'
        }).success(function (data)
        {
                $scope.show5 = true;

这是我的傻瓜：cardViewer

我的代码出了什么问题？什么是让ng-switch以多种方式进入/离开的正确方法？

Answer 1

问题是ngSwitch在ngClass有机会执行并将该图像的类从toRight更改为toLeft之前正在破坏当前图像的范围（或反之亦然）在动画开始之前。

ngSwitch创建一个新范围并在优先级1200执行，而ngClass在优先级0执行。

要使其有效，您只需更新next和prev方法，以便在displayCard之后$timeout设置toLeft属性并设置了toRight，因此ngClass有机会在toLeft销毁该范围之前对新的toRight / ngSwitch设置采取行动。

因此，您的next方法看起来像这样：

scope.next = function() {
  scope.toLeft = false;
  scope.toRight = true;

  // need to do this in a $timeout so ngClass has 
  // chance to update the current image's class based 
  // on the new toLeft and toRight settings before
  // ngSwitch acts on the new displayCard setting
  // and destroys the current images's scope.
  $timeout(function () {
    if (scope.displayCard == 3) {
      scope.displayCard = 1
    } else {
      scope.displayCard += 1;
    }
  }, 0);
};

Here's你的插头显示它工作的叉子。打开控制台以查看ngClass添加类的日志消息，ngSwitch销毁并创建范围。

我将原来的“next”和“prev”按钮留在那里，只添加了“next（fixed）”和“prev（fixed）”按钮，这样您就可以比较日志消息，看看如何使用原始按钮{ {1}}在ngSwitch执行之前销毁范围，而在ngClass执行ngClass之前，ngSwitch会破坏范围。

如何以多种方式制作Angular ng-switch动画（进入/离开）？

1 个答案: