vue2 列表过渡动画 为什么没有动画效果?

Question

<transition-group class="poster-wrapper" tag="ul" name="slide">
                <li class="poster" v-for="(img,index) in imgs" v-show="index === imgShow" :key="index">
                  <img  width="100%" height="225" :src="img">
                </li>
  </transition-group>

.slide-enter-active, .slide-leave-active{
    transition: all 1s ease-out
}
  
.slide-enter {
  opacity: 0
  transform: translateX(100%)
}
  
.slide-leave-active{
  opacity: 0
  transform: translateX(-100%)
}