vue transition-group - 양쪽 요소가 mode = out-in에서 공간을 예약하지 못하게하는 방법

Question

떠나는 요소가 나올 때까지 입력 요소가 표시되지 않도록하려면 어떻게합니까? (아래 내 시도의 문제는 컨테이너가 같은 시간에 두 요소를 허용, 키 성장해야한다는 것이다. 그러나 아웃에서 충돌 이런 종류의 피하기 위해 선택되었다) 당신의 <transition>를 대신 사용해야합니다

 <div class="transition-wrapper"> 
      <transition-group mode="out-in" name="left-right-slide"> 
       <div class="panel-slot" key="left" v-if="slot === 'left'"> 
        <slot :name="slot"></slot> 
       </div> 
       <div class="panel-slot" key="right" v-else> 
        <slot :name="slot"></slot> 
       </div> 
      </transition-group> 
     </div> 
    </div> 
</template> 

<style lang="scss" scoped> 
    .left-right-slide-enter-active { 
     transition: all .3s ease; 
     transition-delay: .4s; 
    } 
    .left-right-slide-leave-active { 
     transition: all .4s cubic-bezier(1.0, 0.5, 0.8, 1.0); 
    } 
    .left-right-slide-enter, .left-right-slide-leave-to { 
     transform: translateX(100vw); 
    } 

Answer 1

을 <transition-group>. <transition-group>은 mode 소품을 지원하지 않습니다.