文本分割与动画一起居中

Question

原则上，我想做下面概述的事情。该页面有两种可能的状态。在第一个中，两个文本（它们的长度可能不同）作为标题居中。对于第二种状态，文本在页面的不同位置分别居中。两种状态之间的转换由按下按钮启动并顺利进行。

我的代码是用 Vue 编写的，但我认为我在这里更需要一些 CSS 帮助。这是我迄今为止最好的尝试。请注意，该按钮未包含在以下代码中，因为这是已经可以正常工作的部分。

<template>
<h1 class="cat_num" :class="{active : solved}">Text 1</h1>
<h1 class="cat_name" :class="{active : solved}" >Text 2 (possibly lengthy)</h1>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      solved: false,
    };
  },
};
</script>

<style>
.cat_num {
  position: fixed;
  margin-top: 5px;
  transition: all 2s ease;
  display: inline;
} 

.cat_num.active {
  font-size: 40px;
  top: 100px;
}

.cat_name {
  position:fixed;
  margin-top: 5px;
  transition: all 2s;
  display: inline;
}

.cat_name.active {
  font-size: 50px;
  top: 200px;
}
</style>

转换效果很好。问题是我无法存档文本的共同排列。

欢迎任何帮助或评论。感觉是个很简单的问题。但是，我已经花了很长时间来研究它。谢谢！