AngularJS/ng动画-带有动态内容的交叉淡入淡出动画

我的页面上有一个容器，它有一个背景和一个最小高度。在容器内部，我有几个“page”div，它们通过ng if逻辑进行切换。这些页面是动态的，因此父容器的高度取决于这些子容器的高度。基本结构如下：

<div class="container">
   <div class="page">
      Page 1
   </div>
   <div class="page">
      Page 2
   </div>
</div>

第1页
第2页

到目前为止，一切顺利。在这些页面之间切换的效果与我预期的一样，容器的高度可以根据需要进行拉伸。但是，我需要在页面之间添加一个交叉淡入淡出过渡，这样它们就可以很好地相互淡入淡出。要做到这一点，我需要在容器中绝对定位“page”元素，以便DOM在转换过程中不会跳转。但是，很明显，这会将它们从文档流中删除，并阻止父容器正确选择其高度。由于DOM的其余部分依赖于此高度，因此它破坏了我的布局

我已经创建了一支基本的钢笔来说明这个问题-取消注释第二行中的position:absolute，看看十字渐变应该是什么样子：

---

对于这个问题，有没有一个优雅的解决方案，它不需要使用Javascript动态地重新计算高度？

我能够通过在要离开的元素上应用position:absolute来解决我的问题，但在要进来的元素上保持position:relative。它并不完美，因为容器高度不能很好地过渡，但除此之外，它是一个非常干净的解决方案：

/* Added this */
.ng-fade.ng-leave {
   position: absolute;
   top: 20px; /* Arbitrary positioning for the container padding */
   left: 20px;
}

如果有人建议为过渡设置容器高度的动画（因为高度：auto不会设置动画），我洗耳恭听

可以像这样设置元素的animation（）事件-

---

我正要回答您使用

.page.ng leave

而不是

.page

：）另外，定位的一个解决方法是删除

顶部

和

左侧

属性，而是在

页面上应用
边框：实心50px透明
 app.animation('.ng-fade', function() {
  return {
    enter : function(element, done) {
      var rect = element[0].getBoundingClientRect();
      element.parent().css({height:rect.height+"px"}); 
      done();
    },
    leave : function(element, done) {
       done();
    }
  };
});