transition包裹多元素使用时，不生效

<template>
  <div>
    <span style="margin-right: 20px">Click to cycle through states:</span>
    <div class="btn-container">
      <transition name="slide-up" mode="out-in">
        <button v-if="docState === 'saved'"
                key="saved"
                @click="docState = 'edited'">Edit</button>
        <button v-else-if="docState === 'edited'"
                key="edited"
                @click="docState = 'editing'">Save</button>
        <button v-else-if="docState === 'editing'"
                key="editing"
                @click="docState = 'saved'">Cancel</button>
      </transition>
    </div>
  </div>
</template>
 
<script>
export default {
  data(){
    return {
      docState:'saved'
    }
  },
  mounted(){
  },
  methods:{
  }
}
</script>
 
<style>
.btn-container {
  display: inline-block;
  position: relative;
  height: 1em;
}

button {
  position: absolute;
}

.slide-up-enter-active,
.slide-up-leave-active {
  transition: all 0.25s ease-out;
}

.slide-up-enter-from {
  opacity: 0;
  transform: translateY(30px);
}

.slide-up-leave-to {
  opacity: 0;
  transform: translateY(-30px);
}
</style>

要注意使用key！！！！