Looking to achieve a smooth animation effect where the current visible div fades out and another div fades in its place upon clicking the pagination button.
I have successfully implemented the fade in and fade out transitions for the divs.
However, during the transition, the div that is about to fade in gets displaced below the fading out div.
This is my current setup:
// html
<div ng-show="isGroupActive(1)" class="group"></div>
<div ng-show="isGroupActive(2)" class="group"></div>
<div ng-show="isGroupActive(3)" class="group"></div>
<button ng-click="activateGroup(1)">1</button>
<button ng-click="activateGroup(2)">2</button>
<button ng-click="activateGroup(3)">3</button>
// css
.group.ng-hide-add-active {
display: block!important;
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
}
.group.ng-hide-remove-active {
display: block!important;
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.group.ng-hide {
opacity: 0;
}
.group.ng-show-add-active {
display: block!important;
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
}
.group.ng-show-remove-active {
display: block!important;
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.group.ng-show {
opacity: 1;
}
// js
function MainController($scope) {
var groupActive = 1;
$scope.isGroupActive = function(page) {
return page === groupActive;
};
$scope.activateGroup = function(page) {
groupActive = page;
}
}
var app = angular.module('app', ['ngAnimate']);
app.controller('MainController', MainController);
In order to prevent the displacement of the div, is it possible to achieve this by adjusting the CSS transition classes?