Javascript 如何在bootstrap vue中设置下拉菜单动画

我试图在bootstrap vue中设置下拉菜单的动画，但这似乎不起作用。我的CSS有什么问题，或者有不同的方法吗？我不想使用任何动画库，而是想通过简单的CSS实现它

沙盒链接-

第一个动作
第二个动作
第三个行动
导出默认值{}；
.滑入{
不透明度：0；
}
.滑动移动{
转变：转变1s；
}
.滑入激活状态{
动画：滑入0.5s，向前放松；
过渡：不透明度0.5s；
}
.滑动保持活动状态{
位置：绝对位置；
宽度：100%；
动画：滑出0.5秒，向前放松；
过渡：不透明度0.5s；
不透明度：0；
}
@关键帧滑入{
从{
转换：translateY（-20px）；
}
到{
变换：translateY（0px）；
}
}
@关键帧滑出{
从{
变换：translateY（0px）；
}
到{
变换：translateY（20px）；
}
}

 <template>
  <b-dropdown id="dropdown-1" text="Dropdown Button" class="m-md-2">
    <transition-group mode="out-in" type="animation" name="slide">
      <b-dropdown-item key="1">First Action</b-dropdown-item>
      <b-dropdown-item key="2">Second Action</b-dropdown-item>
      <b-dropdown-item key="3">Third Action</b-dropdown-item>
    </transition-group>
  </b-dropdown>
</template>

<script>
export default {};
</script>

<style>
.slide-enter {
  opacity: 0;
}

.slide-move {
  transition: transform 1s;
}

.slide-enter-active {
  animation: slide-in 0.5s ease-out forwards;
  transition: opacity 0.5s;
}

.slide-leave-active {
  position: absolute;
  width: 100%;
  animation: slide-out 0.5s ease-out forwards;
  transition: opacity 0.5s;
  opacity: 0;
}

@keyframes slide-in {
  from {
    transform: translateY(-20px);
  }
  to {
    transform: translateY(0px);
  }
}

@keyframes slide-out {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(20px);
  }
}
</style>