CSS 动画在动画期间将第二个元素向下移动

Question

我在使用 ngAnimate 设置 ng-if 动画时遇到问题。我有两个不同的容器相互替换，通过 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> 块级元素占用自己 space 的默认行为。您可以将 position: absolute 添加到方框 class 中，使其脱离正常的文档流。

另外添加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>

CSS 动画在动画期间将第二个元素向下移动

CSS animation moves second element down during animation

html

css

css-animations

ng-animate

animate.css