Question

我一直在玩AngularJS中的动画方面，我似乎无法获得我需要的那种功能：

.box.ng-hide-add {-webkit-animation: fadeOutLeftBig 0.4s;}
.box.ng-hide-remove {-webkit-animation: fadeInRightBig 0.4s;}
.box.ng-show-add{-webkit-animation: fadeInRightBig 0.4s;}

理想情况下，当用户点击“下一步”按钮时，当前框应该从左侧退出，而下一行的框从右侧轻松进入，从而创建幻灯片/轮播效果。
但是现在它们都来自同一方。

这甚至可能吗？我觉得我已经接近了，但我可能只是想错了。我在忽视或忘记什么？

代码段：

(function(){
  var app = angular.module("theapp", ['ngAnimate']);

  var controller = function($scope){
    $scope.currentPage = 1;
  };

  app.controller("controller", controller);
}());

.box.ng-hide-add {
  -webkit-animation: fadeOutLeftBig 0.4s;

}
.box.ng-hide-remove {
  -webkit-animation: fadeInRightBig 0.4s;
}

.box.ng-show-add {
  -webkit-animation: fadeInRightBig 0.4s;
}

.box {
  height:100px;
  width:100px;
}
.red {background-color:red;}
.blue {background-color:blue;}
.purple {background-color:purple;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.0/animate.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-animate.min.js"></script>

<body ng-app="theapp">
  <div ng-controller="controller">
    <div style="height:100px; margin-left:300px;">
      <div ng-show="currentPage==1" class="box red">
        content
      </div>
      <div ng-show="currentPage==2" class="box blue">
        content
      </div>
      <div ng-show="currentPage==3" class="box purple">
        content
      </div>
    </div>
    <button ng-click="currentPage=currentPage-1">Previous</button>
    <button ng-click="currentPage=currentPage+1">Next</button>
  </div>
</body>

（小提琴：http://jsfiddle.net/poppypoop/Ldyvy062/3/ ）

感谢任何帮助！

Answer 1

下面的代码可以满足您的需求，请参阅代码中的注释以获得解释，希望这有用。我改为ng-if而不是ng-show，能够在CSS中使用ng-enter，ng-leave

＆＃13;

(function () {
        var app = angular.module("theapp", ['ngAnimate']);

        var controller = function ($scope, $timeout) {
            $scope.currentPage = 1;
            $scope.numberOfPages = 3;

            $scope.changePage = function (action) {
                if (action === '+') {
                $scope.direction = 'toRight';
                $timeout(function () { // timeout to allow direction class to update before changing currentPage
                    $scope.currentPage = $scope.currentPage < $scope.numberOfPages ? $scope.currentPage + 1 : 1;
                }, 0)
            } else if (action === '-') {
                $scope.direction = 'toLeft';
                $timeout(function () { // timeout to allow direction class to update before changing currentPage
                    $scope.currentPage = $scope.currentPage > 1 ? $scope.currentPage - 1 : $scope.numberOfPages;
                }, 0)
            }
            }
        };

        app.controller("controller", controller);
    }());

＆＃13;

.toRight .box.ng-enter {
    -webkit-animation: fadeInRightBig 0.7s;
}

.toLeft .box.ng-enter {
    -webkit-animation: fadeInLeftBig 0.7s;
}

.toRight .box.ng-leave {
    -webkit-animation: fadeOutLeftBig 0.7s;
}

.toLeft .box.ng-leave {
    -webkit-animation: fadeOutRightBig 0.7s;
}

.box {
    height: 100px;
    width: 100px;
    position:absolute; /*This is to avoid animations to overlap, causing a weird behavior*/
}

.red {background-color:red;}
.blue {background-color:blue;}
.purple {background-color:purple;}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.0/animate.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-animate.min.js"></script>
<body ng-app="theapp">
    <div ng-controller="controller">
        <div style="height:100px; margin-left:300px;" class="{{direction}}"><!--Added angular variable in class to determite direction-->
            <div ng-if="currentPage==1" class="box red">
                content
            </div>
            <div ng-if="currentPage==2" class="box blue">
                content
            </div>
            <div ng-if="currentPage==3" class="box purple">
                content
            </div>
        </div>
        <button ng-click="changePage('-')">Previous</button>
        <button ng-click="changePage('+')">Next</button>
    </div>
</body>

＆＃13;

在Angular中幻灯片放映css过渡

1 个答案: