Slide show css transition in Angular

Question

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!

One thing I can see is that display is immediately set to none for the box that should fade out. So even if the animation is technically taking place, you wouldn't see it because the box is removed from the page. So that would be my next step: find out how to delay the display:none until after the animation is finished. (Keep in mind, I have never used AngularJS, but this is just what I observe) — myfunkyside
– myfunkyside, Commented Oct 31, 2014 at 4:06
Have you considered how you will animate for the 'Previous' button? Because now (if you get your current issue to work) you will get the exact same animation (easeOutToLeft,easeInFromRight) if you press the 'Previous' button. That would be really weird.. — myfunkyside
– myfunkyside, Commented Oct 31, 2014 at 4:53

Urielzen · Accepted Answer · 2014-10-31 10:22:50Z

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>

Very nice work sir! And you immediately fixed the past-the-last-page bug!

Collectives™ on Stack Overflow

Slide show css transition in Angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related