如何在Vue.js中的文本之间淡入淡出

Question

在我的项目中，我有一个div元素，它经常更改文本。当文本被更改时，我想完全淡出旧文本，然后在同一位置淡入新文本。

虽然我已经让它在大多数情况下工作，但是在另一个完全消失之前，正在创建一个新的段落元素。在添加另一个元素之前，我有没有办法让元素完全褪色？

这是一个表示我的意思的代码：https://codepen.io/anon/pen/qppgzz。

注意旧的<p :key="index">{{ text }}</p>在添加新的requiresFadingEdge之前没有完全过渡掉。