vue transition-group - 両方の要素がmode = out-inで空き領域を予約しないようにする方法

Question

leave要素が残されるまで、入力要素が表示されないようにするにはどうすればよいですか？ （下の私の試みに問題がコンテナが同時に両方の要素を考慮して、背が伸びるしなければならないということである。しかし、外では、衝突のこの種を避けるために選ばれました）

 <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>の代わりに使用する必要があります<transition-group>。 <transition-group>はmode小道具をサポートしていません。