Question

我是棱角分明的新手，正在用它建造一个项目。我已经正确设置了所有的视图/路由，现在正试图“美化”视图之间的转换。我见过的许多演示都使用绝对定位元素，这使得转换变得容易。

我的内容永远是动态的。有人可以协助我使包装过渡的高度平滑以及褪色。淡入淡出按预期工作

http://plnkr.co/edit/KlVfqCxQIE4VBwatuLgc?p=preview

Answer 1

带有这样的标记

  <div class="wrapper">
    <div class="wrapper-inner">
      {CONTENT}
    </div>
  </div>

您可以观察包装内部高度的变化并设置包装器的高度

scope.$watch(
    function() {

        return innerElement[0].offsetHeight;
    },
    function(value, oldValue) {

        element.css('height', value+'px');

}, true);

然后使用css过渡动画高度变化

.wrapper {
  overflow: hidden;
  transition: height ease .3s;
}

这是一个plunker http://plnkr.co/edit/IiR228W9Z9JFkvdvhVZp

具有动态内容的动态div的动画包装 - 没有固定高度

1 个答案: