我们可以使用position: absolute的简单定位，并将其应用于两个文本.然后，我们可以将文本相对于中心锚点定位，使它们居中，如下所示:
var app = new Vue({
el: "#app",
data: {
solved: false,
},
methods: {
change_solved() {
this.solved = !this.solved;
},
},
})
.container {
position: relative;
}
.cat_num {
transition: all 2s ease;
position: absolute;
right: 50%;
top: 0;
transform: translate(0, 0);
}
.cat_num.active {
font-size: 40px;
top: 100px;
transform: translate(50%, 0);
text-align: center;
}
.cat_name {
transition: all 2s;
position: absolute;
left: 50%;
top: 0;
transform: translate(0, 0);
}
.cat_name.active {
font-size: 50px;
top: 200px;
transform: translate(-50%, 0);
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button v-on:click="change_solved">Solve</button>
<div class="container">
<h1 class="cat_num" :class="{active : solved}">Text 1</h1>
<h1 class="cat_name" :class="{active : solved}">Text 2 (possibly lengthy)</h1>
</div>
</div>
长文本可能是问题所在，因为如果长文本超过一行，就很难使转换更流畅，因为文本对齐方式发生了变化(使用text-align: left表示第二个状态会使其看起来不好，如果我们使用text-align: center表示第一个状态，它也会看起来不好).
EDIT:个
要将两个文本作为一个整体居中，我们可以对它们使用内联显示，并将初始位置设置为静态.
var app = new Vue({
el: "#app",
data: {
solved: false,
},
methods: {
change_solved() {
this.solved = !this.solved;
},
},
})
.container {
position: relative;
text-align: center;
}
.cat_num {
transition: all 2s ease;
right: 50%;
top: 0;
transform: translate(0, 0);
display: inline;
position: static;
}
.cat_num.active {
font-size: 40px;
top: 100px;
transform: translate(50%, 0);
text-align: center;
position: absolute;
}
.cat_name {
transition: all 2s;
left: 50%;
top: 0;
transform: translate(0, 0);
display: inline;
position: static;
}
.cat_name.active {
font-size: 50px;
top: 200px;
transform: translate(-50%, 0);
text-align: center;
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button v-on:click="change_solved">Solve</button>
<div class="container">
<h1 class="cat_num" :class="{active : solved}">Text 1</h1>
<h1 class="cat_name" :class="{active : solved}">Text 2 (possibly lengthy)</h1>
</div>
</div>
但正如上面的代码片段所示，在转换到第二个状态时，它会感觉像跳到了中间(这是因为我们更改了position属性.要解决这个问题，我们可能需要一个小的脚本来保持position为absolute，并计算left和right的值.
var app = new Vue({
el: "#app",
data: {
solved: false,
isMounted: false,
},
computed: {
textsTotalWidth() {
if (!this.isMounted) {
return 0
}
return (this.$refs.catNum.offsetWidth + this.$refs.catName.offsetWidth) / 2
},
catNumRight() {
if (!this.isMounted) {
return ''
}
return `calc(50% + ${this.textsTotalWidth - this.$refs.catNum.offsetWidth}px)`
},
catNameLeft() {
if (!this.isMounted) {
return ''
}
return `calc(50% - ${this.textsTotalWidth - this.$refs.catNum.offsetWidth}px)`
}
},
methods: {
change_solved() {
this.solved = !this.solved;
},
},
mounted() {
this.isMounted = true;
}
})
.container {
position: relative;
}
.cat_num {
transition: all 2s ease;
position: absolute;
top: 0;
transform: translate(0, 0);
}
.cat_num.active {
font-size: 40px;
top: 100px;
transform: translate(50%, 0);
text-align: center;
right: 50% !important;
}
.cat_name {
transition: all 2s;
position: absolute;
top: 0;
transform: translate(0, 0);
}
.cat_name.active {
font-size: 50px;
top: 200px;
transform: translate(-50%, 0);
text-align: center;
left: 50% !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button v-on:click="change_solved">Solve</button>
<div class="container">
<h1 ref="catNum" class="cat_num" :class="{active : solved}" :style="{'right':catNumRight}">Text 1</h1>
<h1 ref="catName" class="cat_name" :class="{active : solved}" :style="{'left':catNameLeft}">Text 2 (possibly lengthy)</h1>
</div>
</div>
