Vue.js 如果Vue过渡组没有显示任何影响，我做错了什么？

我对Vue还是一个新手，但我正在尝试将一个转换组包装器应用到一个v-for div组中，添加以下内容后，根本没有任何影响

有人能看到这里出了什么问题吗

这是模板的简化版本：

<template>
  <main>
      <div class="notes">
            <transition-group name="sort" tag="div" appear>
              <div v-for="post in posts" :key="post.id">
                <SinglePost :post="post" />
              </div>
            </transition-group>
      </div>
  </main>
</template>

和样式标签：

<style scoped>

  /* TRANSITION  */
  .sort-enter-active, .sort-leave-active {
    transition: opacity .5s;
  }

  .sort-enter {
    transform: translateY(10px);
    opacity: 0;
  }

  .sort-move {
    transition: transform .5 ease-out;
  }
</style>

/*过渡*/
.sort进入活动状态，.sort离开活动状态{
转变：不透明度。5s；
}
.排序输入{
变换：translateY（10px）；
不透明度：0；
}
.分类移动{
转变：转变。5放松；
}

您可以尝试使用

transition:all.5s在哪里使用CSS转换？我看到
转换。5放松这是无效的CSS。恐怕没有区别。与.sort enter active、.sort leave active的情况相同，它只应转换不透明度。那也不行。你试过从这个文件申请吗
.sort move
似乎不是预期CSS类的一部分<代码>。似乎缺少将休假排序到
。就是这样！只需要将其添加到-move类{transition:transform1s；}