Vue过渡效果使用transition和transform scale怎么会左右移动啊

Question

scale不是只有放大缩小的效果嘛，，，怎么会左右移动呢？
代码如下：

css部分：

.show-hide-enter-active {
    transition: all .5s ease;
}
.show-hide-leave-active {
    transition: all 1s ease;
}
.show-hide-enter, .show-hide-leave-active {
    transform: scale(0);
    opacity: 0;
}

html部分：

<transition name='show-hide'>
    <p v-if='show'>HELLO</p>
</transition>

我是新手，请帮帮我吧。。。

Answer 1

差不多是@scaleryvan的重复回复，只不过，有一个可运行的代码。
https://jsfiddle.net/1000copy...

Answer 2

默认的2D变形是以元素的水平垂直中心点为准，所以你用这个方法的时候看着文字左右移动了，实际上是以中心点在变形，而内容太少，造成了你以为左右移动了。