同步两个 q-card 之间的过渡效果

Question

我的应用程序中的一个模块有两个 q-card：一个在左侧，另一个在右侧。

第一个q-card可以通过一个按钮的动作折叠/隐藏，具有过渡效果，非常类似于q-drawer的行为。

这部分效果很好。

问题在于右侧q卡的大小调整，导致延迟，然后突然调整大小。

CODE PEN

<div id="q-app">
  <div class="fit row no-wrap justify-start items-stretch content-stretch">
     

        <transition
             enter-active-class="animated slideInLeft"
             leave-active-class="animated slideOutLeft"
            >
            <q-card 
              v-if="leftVisible"
              class="col-3  window-height" 
              style="margin:1px; box-shadow: 5px 0 15px rgba(0,0,0,0.22); z-index:100" >
                
                <q-toolbar class="shadow-1"  style="max-height:20px; margin-left:2px; border-bottom: 1px solid #CFCFCF; font-size:10px">                    Test
                </q-toolbar>
              </q-card>

      </transition>
      
     <q-card class="fit window-height bg-white" >
       <q-toolbar class="shadow-1"  style="max-height:20px; margin-left:2px; border-bottom: 1px solid #CFCFCF; font-size:10px">           
              <q-btn icon="menu" color="blue-9" flat rounded dense @click.stop="leftVisible = !leftVisible"/>               
        </q-toolbar>
     </q-card>

 </div>
  
      </q-page>
</template>

Answer 1

你需要把你的卡片放在过渡标签中，这样它才能流畅地动画。但是当我尝试这样做时，它破坏了您的布局，因为在这种情况下您不能拥有包装器 row 类。因此，您需要找出在transition 标签内对齐您的项目的方法。其中一个选项是为您的左卡提供固定宽度，而另一个选项应该具有动态百分比。另外，请查看transition modes 以找到理想的效果。