根据孩子的尺寸变化调整父级div的动画效果

Question

我遇到了这个问题，到目前为止，我找不到任何解决方案。

我有使用VueJS构建的登录/注册页面（虽然不很相关，但在某种程度上可以）。 我在着陆页上有带有徽标等的容器，在该容器中，我具有用于登录或注册组件的路由器视图。 组件的过渡是平滑的，但由于登录较小，并且组件过渡后容器的高度/宽度不是固定的，因此我会逐步改变大小... 我尝试将其应用于该容器：

.container-landing
    transition width 3000ms linear, height 3000ms linear;

3000以确保它不起作用;） 但它不能肯定....知道为什么吗？ 如何处理？

着陆结构是这样的：

q-page.flex.flex-center
    .container-landing
      .row
        .col.text-center
          img(alt='logo', src='~assets/ep_logo_vert.png', style='width: 300px;')
      .row
        .col
          transition(
            name="transitions"
            enter-active-class="animated fadeIn"
            leave-active-class="animated fadeOut"
            mode="out-in")
            router-view

当我直接强制调整.container-landing的大小时，动画效果很好，但是不幸的是，当内部组件推动更改时，动画根本没有动画。