Question

我已经在线阅读了几个教程，但我似乎无法一起获得跨浏览器的工作示例。

HTML：

<div ng-include="show ? 'views/registration/form_activation.html' : null" ng-animate class="drop-down"></div>

CSS：

/* ANIMATIONS */

.drop-down {
  -webkit-transition: all linear 1s;
  -moz-transition:    all linear 1s;
  -ms-transition:     all linear 1s;
  -o-transition:      all linear 1s;
  transition:         all linear 1s;

  line-height: 100%;

}

.drop-down.ng-enter,
.drop-down.ng-leave-active {
  opacity: 0;
  max-height: 0px;
}

.drop-down.ng-enter-active,
.drop-down.ng-leave {
  opacity: 1;
  max-height: 100%;
}

我想要实现的是，当模板加载ng-include时，它会从0到100不透明度逐渐消失，并且它会同时打开，就像下拉列表一样（从0开始到需要的全高度）。当表单被隐藏时，反之亦然。

不透明度已经起作用，但是改变高度不会，div会立即显示全高。有些人可以帮助我使用跨浏览器解决方案构建CSS吗？

Answer 1

您必须在max-height课程中的px中定义.drop-down才能使其正常工作你可以在px中将任何高值放到max-height，因为你无论如何都没有定义高度。

还在overflow: hidden中定义.drop-down，以便在高度转换时隐藏内容。

为我工作。
示例演示： - http://plnkr.co/edit/rXQQHTogKzAG91xw3JUx?p=preview

简单的AngularJS与CSS动画

1 个答案: