vuejs平滑列表过渡

Question

每当从列表中删除某些元素时，我都会尝试平滑过渡

我在其中添加了.popup-list-move，但是它什么也没做。这些物品仍留在原处并跳到新位置。

我该如何解决？

new Vue({
   el: "#app",
   data: {
      items: [1,2,3,4,5,6]
   },
   methods: {
      remove(i) {
         this.items.splice(i,1);
      }
   }
})

.popup-list-enter-active,
.popup-list-leave-active {
  transition: all 500ms;
}

.popup-list-enter,
.popup-list-leave-to

/* .list-leave-active below version 2.1.8 */ {
  opacity: 0;
  transform: scale(0.7);
}

.popup-list-move {
   transition: transform 300ms;
}

p {
   background: red;
   color: white;
   margin: 10px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
   <transition-group  name="popup-list">
      <p  @click="remove(i)" :key="item" v-for="(item, i) in items">{{item}}</p>
   </transition-group>
</div>