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

Question

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

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

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

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

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

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

Answer 1

我能够通过在 ng-leaving 元素上应用 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 不会设置动画），我洗耳恭听！

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 - 带有动态内容的交叉淡入淡出动画

AngularJS/ng-animate - Cross-fade animation with dynamic content

fade

css-animations

angularjs

ng-animate