删除时，v-move 过渡效果没有生效

来源：4-7 列表动画

烈霓殇

2022-04-13

删除时，v-move 过渡效果没有生效呢？请老师帮忙看下原因，代码如下：

  <style>
    .item {
      display: inline-block;
      margin-right: 10px;
    }

    .v-enter-from,
    .v-leave-to {
      opacity: 0;
      transform: translateY(30px);
    }

    .v-enter-active,
    .v-leave-active {
      transition: all .5s ease-in;
    }

    .v-enter-to,
    .v-leave-from {
      opacity: 1;
      transform: translateY(0);
    }

    .v-move {
      transition: all 1s ease;
    }
  </style>

<body>
  <div id="app">
    <transition-group mode="in-out">
      <span class="item" v-for="item, index in list" :key="item" @click="deleteItem(index)">{{item}}</span>
      <button @click="addItem">增加</button>
    </transition-group>
  </div>
  <script>
    const { createApp } = Vue;
    const App = {
      data() {
        return {
          list: [5, 4, 3, 2, 1],
        }
      },
      methods: {
        addItem() {
          this.list.unshift(this.list[0] + 1);
        },
        deleteItem(index) {
          this.list.splice(index, 1);
        }
      }
    };
    const app = createApp(App);
    const vm = app.mount('#app');
  </script>
</body>

写回答

3回答