Эффект перехода в группе перехода vue, действующий при изменении значения элемента списка - PullRequest
Новая
       31

Эффект перехода в группе перехода vue, действующий при изменении значения элемента списка

1 голос
/ 13 марта 2020

Есть ли какой-нибудь способ, которым мы можем иметь эффект перехода в элементе группы переходов, чтобы иметь эффект перехода при изменении значения в элементе списка? Ниже приведен пример кода, который я хочу, чтобы тег 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);
}
...