CODEWITHSUNDEEP
javascriptcssangularjsng-animate
prawn
prawn

Reputation: 2653

Slide show css transition in Angular

I've been playing around with the animation aspect in AngularJS, and I just can't seem to get the kind of functionality I need:

.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;}

Ideally, when the user hits the 'Next' button, the current box should exit to the left, while the box next in line eases in from the right, creating that slideshow/carousel effect.
But right now it's all from the same side.

Is this even possible? I feel like I'm getting close, but I could just be thinking about it the wrong way. What am I overlooking or forgetting?

Code snippet:

(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>
(fiddle: http://jsfiddle.net/poppypoop/Ldyvy062/3/)

Any help is appreciated!

Upvotes: 1

Views: 587

Answers (1)

Urielzen
Urielzen

Reputation: 506

The code below does what you want, see comments in code for explanation, hope this is helpful. I changed to ng-if, instead of ng-show, to be able to use ng-enter, ng-leave in CSS

(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);
    }());
.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;}
<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>

Upvotes: 1

Related Questions