vue中transition用法

<template>
  <transition name="modal-fade">
    <div class="modal-container" v-if="visible">
      <div class="madal-mask"></div>
      <div class="madal-content">
        <slot name="header">
          <div class="modal-header">
            <slot name="close"><div class="modal-close" @click="closeModal"></div></slot>
            <slot name="title"><div class="modal-title">{
    
    {
    
     title }}</div></slot>
            <slot name="modal-header-right"><div></div></slot>
          </div>
        </slot>
        <slot name="body">
          <div class="modal-body">
          
          </div>
        </slot>
      </div>
      <slot name="modal-btn">
        <div class="btn"><hm-button>{
    
    {
    
     $t('vamc_handle_save') }}</hm-button></div>
      </slot>
    </div>
  </transition>
  
<style scoped lang="less">
.modal-fade-enter-active, .modal-fade-leave-active{
    
    
    transition: all 0.5s ease;
    transform: translateY(0);
}
.modal-fade-enter, .modal-fade-leave-active {
    
    
    opacity: 0;
    transform: translateY(50%);
}
</style>