Vue3 transition动画弹框问题

求助大神：这么写为什么弹窗是从底部滑上来的？正常应该从上面滑下来

<template>
  <div id="demo">
      <button @click="show = !show">
              点击
      </button>
      <transition name="slide">
          <div class="modal" v-show="show">
              <div class="mask"  @click="show = !show"></div>
              <div class="modal-dialog">
                  弹窗主体
              </div>
          </div>
      </transition>
  </div>
</template>

<script>
export default {
    data() {
        return {
            show: false
        }
    },
}

<style lang="scss" scoped>
.modal{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;  
    width: 100%;
    height: 100%;
    transition: all .5s;
  &.slide-enter-active {
      top:0;
  }
  &.slide-leave-active {
      top: -100%;
  }
  &.slide-enter,&.slide-leave-to {
      top:-100%;
  }
    .mask{
        position: fixed;
        top: 0;
        left: 0;
        background: #000000;
        opacity: .5;
    }
    .modal-dialog{
        position: fixed;
        top: 40%;
        left: 50%;
        width: 660px;
        height: auto;
        background-color: #ffffff;
        transform: translate(-50%,-50%)；
    }
}
</style>

已解决：
修改地方
1、modal结构调整

<template>
  <div id="demo">
      <button @click="show = !show">
              点击
      </button>
      <div class="mask" v-show="show"  @click="show = !show"></div>
      <transition name="slide">
        <div class="modal-dialog" v-show="show">
            弹窗主体
        </div>
      </transition>
  </div>
</template>

2、动画样式调整

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 30px;
  color: red;
  background: #000000;
  opacity: 0.5;
}
.modal-dialog {
  position: fixed;
  top: 40%;
  left: 50%;
  transform:translate(-50%,-50%);
  width: 660px;
  height: auto;
  background-color: #ffffff;
  color: red;
  font-size: 30px;
}
.slide-enter-active {
  animation: top-change 0.5s;
}
.slide-leave-active {
  animation: top-change 0.5s reverse;
}
@keyframes top-change {
  0% {
    top: -100%;
  }
  100% {
    top: 40%;
  }
}