Grid

Grid Template

应用

高度平滑过渡

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus blanditiis enim fuga, porro commodi modi. Dolorum dignissimos, at recusandae, et nam ex consequuntur, blanditiis voluptas nemo sed distinctio a accusantium?

Code

<template>
  <div class="my-4">
    <button class="bg-blue-500 text-white px-5 py-2 rounded" @click="show = !show">toggle</button>

    <div class="grid transition-all duration-300 mt-5" :style="{ 'grid-template-rows': show ? '1fr' : '0fr' }">
      <div class="min-h-0 overflow-hidden">
        <div class="border rounded p-5">
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus blanditiis enim fuga, porro commodi modi.
          Dolorum dignissimos, at recusandae, et nam ex consequuntur, blanditiis voluptas nemo sed distinctio a
          accusantium?
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const show = ref(true)
</script>

.grid {
  display: grid;
  transition: all 0.3s;
  grid-template-rows: 0fr;

  &.show {
    grid-template-rows: 1fr;
  }

  .item {
    min-height: 0;
    overflow: hidden;
  }
}

// 过渡需要从0fr到1fr，0无法过渡
// 子元素需要设置min-height，否则仍然占据空间，导致无效