ng-if动画angularjs崩溃

Question

我在angularjs中使用动画时遇到了一些问题.我可以扩展和折叠div但是当我崩溃时,div的内容在容器崩溃后消失.它应该在一起崩溃..我在这里做了一个jsfiddle:

http://jsfiddle.net/7tb4g/119/

css很简单:

.animate-if.ng-enter, .animate-if.ng-leave {
    -webkit-transition: 1s linear all;
    -moz-transition: 1s linear all;
    -ms-transition: 1s linear all;
    -o-transition: 1s linear all;
    transition: 1s linear all;
}

 .animate-if.ng-enter {
    max-height: 0;
    opacity: 0;
}

 .animate-if.ng-enter.ng-enter-active {
    max-height: 999px;
    opacity:1;
}

 .animate-if.ng-leave {
    max-height: 999px;
    opacity:1;
}

 .animate-if.ng-leave.ng-leave-active {
    max-height: 0;
    opacity:1;
}

谢谢

Answer 1

简单的修复 overflow:hidden;

.animate-if.ng-enter, .animate-if.ng-leave {
    -webkit-transition: 1s linear all;
    -moz-transition: 1s linear all;
    -ms-transition: 1s linear all;
    -o-transition: 1s linear all;
    transition: 1s linear all;
    /* no overflow during animation */
    overflow:hidden;
}

DEMO