vue transition-group - Wie verhindert man, dass beide Elemente Platz im Modus = out-in reservieren

Question

Wie kann ich das eintreffende Element stoppen, bis es angezeigt wird, nachdem das leaving Element verlassen wurde? (Das Problem mit meinem Versuch, unter dem der Behälter höher wachsen muss, so dass für beiden Elemente zugleich. Aber out-in wurde gewählt, diese Art der Kollision zu vermeiden)

 <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

Sie <transition> verwenden sollen, statt <transition-group>. <transition-group> unterstützt nicht die mode Prop.