I have implemented a CSS transition to create a sliding effect in my pagination. However, I am facing an issue where the height of the containing div changes even when I set the position of the transitioned elements. Here is a snippet of my CSS:
.slide {
position: relative;
display: block;
}
.slide.ng-enter,
.slide.ng-leave
{
-webkit-transition: 2000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-moz-transition: 2000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-ms-transition: 2000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-o-transition: 2000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
transition: 2000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
}
.slide.ng-enter {
left: 100%;
}
.slide.ng-enter.slide.ng-enter-active {
left: 0;
}
.slide.ng-leave {
left: 0;
}
.slide.ng-leave.slide.ng-leave-active{
left: -100%;
}
Here is how it appears on my view:
<div class="row slide" ng-repeat="alert in pagedItems[currentPage]">
<div class="col-md-12">
{{alert.attributes.subject}}
</div>
</div>
If you want to take a look at the implementation, you can find it on this Plunker link.