在&；中设置动画时如何控制高度；使用animate.css和flexbox退出？

我正在尝试使用angular和ui router设置不同状态的输入/输出动画。我已经添加了animate.css，并且我已经成功地实现了不同状态的转换，但是我的问题是，框的高度有一个奇怪的怪癖，当框的动画看起来是高度的50%时（就像它为另一个状态腾出了空间）但是一旦完成动画制作，盒子就变成了100%的高度，这应该是整个过程的方式

您可以在这里查看：

我觉得这是flexbox的问题

.app-wrapper
    display: flex
    height: 100vh
    flex-flow: column nowrap
    align-items: stretch
    align-content: center

.header
.page-area
    flex: 1

.header
    display: flex
    flex-basis: 72px
    max-height: 72px
    background: tomato
    flex-flow: row nowrap
    align-items: center
    padding: 1em
    .nav
        list-style: none
        margin-left: auto
        li
            display: inline-block

    .brand:hover
        animation: 300ms shake

.page-area
    background: #eee
    flex-grow: 2
    display: flex
    flex-flow: row onwrap
    align-items: stretch

.left-tray,
.content-area
    flex: 1

.left-tray
    flex-basis: 250px
    max-width: 250px
    padding: 10px
    color: whitesmoke
    background: mix(black, teal, 70%)

.content-area
    padding: 10px
    background: white

[ui-view].ng-enter
    transition: 1s
    .left-tray
        opacity: 0
        animation-name: fadeInLeft
        animation-duration: 0.6s
        animation-delay: 0.4s
    .content-area
        animation-name: slideInLeft
        animation-duration: 1s

[ui-view].ng-leave
    transition: 1s
    .left-tray
        animation-name: fadeOutLeft
        animation-duration: 0.6s
        animation-delay: 0.4s
    .content-area
        animation-name: slideOutLeft
        animation-duration: 1s