Vue实现多个元素的过渡动画

常见的多标签过渡是一个列表和描述这个列表为空消息的元素：

<transition>
    <table v-if="items.length > 0">
        <!-- ... -->
    </table>
    <p v-else>Sorry, no items found.</p>
</transition>

注意，当有相同标签名的元素切换时，需要通过 key 属性设置唯一的值来标记，以便让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。

例如下面的代码：

<transition>
    <button v-if="isEditing" key="save">
      Save
    </button>
    <button v-else key="edit">
      Edit
    </button>
</transition>

在一些场景中，也可以通过给同一个元素的 key attribute 设置不同的状态来代替 v-if 和 v-else，上面的例子可以重写为：

<transition>
    <button v-bind:key="isEditing">
       {{ isEditing ? 'Save' : 'Edit' }}
    </button>
</transition>

使用多个 v-if 的多个元素的过渡可以重写为绑定了动态 property 的单个元素过渡。例如：

<transition>
    <button v-if="docState === 'saved'" key="saved">
      Edit
    </button>
    <button v-if="docState === 'edited'" key="edited">
      Save
    </button>
    <button v-if="docState === 'editing'" key="editing">
      Cancel
    </button>
</transition>

可以重写为：

<transition>
    <button v-bind:key="docState">
      {{ buttonMessage }}
    </button>
</transition>
computed: {
    buttonMessage: function () {
      switch (this.docState) {
        case 'saved': return 'Edit'
        case 'edited': return 'Save'
        case 'editing': return 'Cancel'
      }
    }
}