AngularJS/ng-animate - 具有动态内容的交叉淡入淡出动画答案

【问题标题】：AngularJS/ng-animate - Cross-fade animation with dynamic contentAngularJS/ng-animate - 具有动态内容的交叉淡入淡出动画
【发布时间】：2015-02-28 11:38:11
【问题描述】：

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

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

到目前为止，一切都很好。在这些页面之间切换按我的预期工作，并且容器高度根据需要延伸。但是，我需要在页面之间添加交叉淡入淡出过渡，以便它们很好地相互淡入淡出。为此，我需要绝对定位容器内的“页面”元素，以便 DOM 在过渡期间不会跳来跳去。但是，很明显，这会将它们从文档流中移除，并阻止父容器正确获取其高度。由于我的 DOM 的其余部分依赖于这个高度，它破坏了我的布局。

我已经创建了一个基本的笔来说明问题 - 在第二行取消注释 position: absolute 以查看交叉淡入淡出的外观：

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

对于这个问题，是否有不需要使用 Javascript 即时重新计算高度的优雅解决方案？

【问题讨论】：

标签： angularjs css-animations fade ng-animate

【解决方案1】：

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

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

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

如果有人建议为过渡的容器高度设置动画（因为 height: auto 不会动画），我会全力以赴！

【讨论】：

我正要回答你使用.page.ng-leave 而不是.page :)
另外一种定位方法是删除top 和left 属性，而是在.page 上应用border: solid 50px transparent

【解决方案2】：

您可以像这样设置元素的动画（）事件 - 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();
    }
  };
});

【讨论】：