CSS animation moves second element down during animation - html

Question

I have a problem when animating ng-if with ngAnimate. I have two different containers which replace each other, by fadeInLeft the new element and fadeOutRight the old element. However, during the animation the second container is moved down.
Here is a simplified example of my problem (display in full-screen mode to see the exact problem):
var app = angular.module("MyApp", ['ngAnimate']);
app.controller("MyController", function($scope, $interval) {
$scope.show = true;
$interval(function() {
$scope.show = !$scope.show;
}, 3000);
});
.box {
height: 200px;
}
.box.ng-enter {
animation: fadeInLeft 1.0s;
}
.box.ng-leave {
animation: fadeOutRight 1.0s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.css" />
<div ng-app="MyApp" ng-controller="MyController">
<div ng-if="show" class="box" style="background:red"></div>
<div ng-if="!show" class="box" style="background:blue"></div>
</div>

Answer 1

That is the default behavior of <div> block level elements to occupy their own space. You can add position: absolute to the box class so that it comes out of the normal document flow.
Also add width: 100% since the width of the absolutely positioned div is limited to the content.
In order to limit the positioning inside this area, make sure you add position: relative to the parent element.
Updated Plunker
var app = angular.module("MyApp", ['ngAnimate']);
app.controller("MyController", function($scope, $interval) {
$scope.show = true;
$interval(function() {
$scope.show = !$scope.show;
}, 3000);
});
.box {
height: 200px;
position: absolute;
width: 100%;
}
.box.ng-enter {
animation: fadeInLeft 1.0s;
}
.box.ng-leave {
animation: fadeOutRight 1.0s;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.css" />
<div ng-app="MyApp" ng-controller="MyController">
<div ng-if="show" class="box" style="background:red"></div>
<div ng-if="!show" class="box" style="background:blue"></div>
</div>