CSS動畫在動畫過程中向下移動第二個元素

Question

當動畫ng-if和ngAnimate時，我遇到問題。我有兩個不同的容器相互替換，fadeInLeft新元素和fadeOutRight舊元素。但是，在動畫期間，第二個容器向下移動。

這是我的問題（在全屏幕模式顯示，看確切的問題）的簡化示例：

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

也就是說的<div>塊級元素的默認行爲來佔據自己的空間。您可以將position: absolute添加到Box類中，以使其脫離正常的文檔流程。

還要加上width: 100%，因爲絕對定位div的寬度僅限於內容。

爲了限制在此區域內的定位，請確保將position: relative添加到父元素。

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>