[筆記] 實作動畫 div 移入效果需注意滾軸所造成的影響 @地瓜大的飛翔旅程

章節連結

內容

在 HTML 實作中，div 的滑入效果若是使用 top: -100% 來讓畫面進入的話，要小心內容若有滾軸的話，那這樣 top: -100% 回去的距離會有可能不足。這邊筆記下避免方法。

內容

以下是一段 Vue3 所呈現的 Template 段落，其中 content slot 的內容，是有機會出滾軸的。因此在使用 top 讓畫面移到視窗外的技巧時，要避免使用百分比 ( 因為 % 無法完整反應滾軸出現後的高度 )。這樣一來在收回效果時，就會出現收回不完整的情況。

<div
    ref="bookingCardTemplate"
    class="booking-card-template rounded-lg shadow-lg"
    :class="[siteStore.active ? 'top-[-2000px]' : 'top-[2000px]']"
  >
    <div
      class="sticky top-0 z-30 flex items-center border-b bg-white p-4 md:hidden"
      :class="{ 'is-scrolled': !arrivedState.top && !arrivedState.bottom }"
    >
      <slot name="button" />
    </div>

    <div>
      <slot name="content" />
    </div>
  </div>