Javascript 使用vue路由器在不同高度的Vuejs组件之间创建平滑过渡时出现问题

好的，我基本上是在尝试使用vue路由器在基本容器中动态切换组件。问题是，我想为过渡设置动画，但由于所有元素都有不同的高度，所以我在平滑过渡时遇到了一个问题。如果你想知道我想做什么，你可以在codepen上查看。只要点击“组件2”，你就会明白我的意思

如您所见，我使用这四种方法来控制容器的外观以及组件转换时的显示，这样它们就不会相互错开（这看起来很可怕）：

在理想情况下，我希望容器的高度从当前值逐渐过渡到新值。然而，我面临两个问题：

1） 新的高度直到过渡结束并且新构件就位后才知道（当您考虑它时，这是有意义的）

2） 高度转换必须发生在容器上，而不是当前滑入/滑出的实际元素上

有人知道如何解决这个问题并在我的各个组件之间创建一个平滑的过渡吗

beforeEnter: function(el){

    this.$refs['container'].style.height = getComputedStyle(this.$refs['container']).height;

    el.style.width = getComputedStyle(this.$refs['container']).width;
    el.style.position = "absolute"; 
},

beforeLeave: function(el){

    this.$refs['container'].style.height = getComputedStyle(this.$refs['container']).height;
    el.style.position = "absolute";
    el.style.width = width;
},

afterEnter: function(el){
    el.style = "";
    this.$refs['container'].style.height = 'auto';
},

afterLeave: function(el){
    el.style = "";
    this.$refs['container'].style.height = 'auto';
},