javascript - 过渡组vue中的过渡效果在列表项的值更改时生效

Question

有没有什么方法可以在转换组项中产生转换效果，以便在列表项中的值发生变化时产生转换效果？下面是我希望span标签在item.status发生变化时有过渡效果的示例代码。在示例代码下方。

   <div id="list-demo">
    <transition-group name="list" tag="p">
      <div
        v-for="(item,index) in items"
        v-bind:key="index"
        class="list-item"
        @click="changeStatus(item)"
      >
        Click Me
        <span v-if="item.status==='loading'">Loading...</span>
        <span v-if="item.status==='done'">Done...</span>
      </div>
    </transition-group>
  </div>

脚本

new Vue({
  el: '#list-demo',
  data: {
    items: [
      { value: 1, status: 'open' },
      { value: 2, status: 'open' }
    ],
    nextNum: 10
  },
  methods: {
    changeStatus(item) {
      item.status = 'loading'
      setTimeout(() => {
        item.status = 'done'
      }, 2000
      )
    }
  }
})

风格

.list-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(30px);
}

标签： javascriptvue.jscss-transitions