请稍等 ...

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

删除时，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>

烈霓殇 2022-04-13 10:19:19

源自：4-7 列表动画

489

收起

提交取消

3回答

吃葡萄只吃葡萄皮 2022-11-03 11:50:30

删除时，没有应用到v-move属性，可以在v-leave-active 加一个绝对定位 .v-leave-active { position: fixed; }

0 回复有任何疑惑可以回复我~

收起回答

慕用4509656 2022-07-15 14:05:33

v-for 中 item和index要包裹在小括号内

0 回复有任何疑惑可以回复我~

收起回答

Dell 2022-04-17 21:24:22

入场和出场都没有动画效果吗？

0 回复有任何疑惑可以回复我~

收起回答

提问者烈霓殇 #1
```
入场有动画，出场没有动画。
```
回复有任何疑惑可以回复我~ 2022-04-18 06:12:47
Dell 回复提问者烈霓殇 #2
```
.v-leave-from 改成 .v-leave，你看看是否 OK
```
回复有任何疑惑可以回复我~ 2022-04-24 09:59:58