Question

我的页面上有一个容器，它有一个背景和一个最小高度。在容器内，我有几个＆＃34; page＆＃34;用ng-if逻辑切换的div。这些页面是动态的，因此父容器的高度取决于这些子项的高度。基本结构是这样的：

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

到目前为止，这么好。在这些页面之间切换按预期工作，容器高度根据需要延伸。但是，我需要在页面之间添加一个交叉渐变过渡，以便它们很好地淡入彼此。要做到这一点，我需要绝对定位＆＃34;页面＆＃34;容器中的元素，以便DOM在转换期间不会跳转。但是，显然，这会将它们从文档流中删除，并阻止父容器正确获取其高度。由于我的其他DOM依赖于这个高度，它会破坏我的布局。

我已经创建了一个基本笔来说明问题 - 取消注释位置：第二行中的绝对值，以查看交叉淡入淡出应该如何显示：

http://codepen.io/JarredMack/pen/xbzWgx

这个问题是否有一个优雅的解决方案，并不需要使用Javascript动态重新计算高度？

Answer 1

我能够通过在元素上应用一个位置绝对来解决我的问题，但保持位置：相对于元素进入。它不完美，作为容器身高并没有很好地过渡，但除此之外，它是一个非常干净的解决方案：

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

http://codepen.io/JarredMack/pen/zxaWLx

如果有人建议为过渡的容器高度设置动画（如高度：自动赢得动画效果），我全都是耳朵！

Answer 2

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

 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();
    }
  };
});

AngularJS / ng-animate - 具有动态内容的交叉渐变动画

2 个答案: