Tailwind CSS 过渡 #

<!-- 所有属性 -->
<div class="transition-all">所有属性过渡</div>

<!-- 无过渡 -->
<div class="transition-none">无过渡</div>

<!-- 默认（颜色、背景、边框） -->
<div class="transition">默认属性过渡</div>

<!-- 颜色 -->
<div class="transition-colors">颜色过渡</div>

<!-- 透明度 -->
<div class="transition-opacity">透明度过渡</div>

<!-- 阴影 -->
<div class="transition-shadow">阴影过渡</div>

<!-- 变换 -->
<div class="transition-transform">变换过渡</div>

<div class="duration-75">75ms</div>
<div class="duration-100">100ms</div>
<div class="duration-150">150ms</div>
<div class="duration-200">200ms</div>
<div class="duration-300">300ms</div>
<div class="duration-500">500ms</div>
<div class="duration-700">700ms</div>
<div class="duration-1000">1000ms</div>

<div class="duration-[2000ms]">2秒</div>

<!-- 线性 -->
<div class="ease-linear">线性</div>

<!-- 缓入 -->
<div class="ease-in">缓入</div>

<!-- 缓出 -->
<div class="ease-out">缓出</div>

<!-- 缓入缓出（默认） -->
<div class="ease-in-out">缓入缓出</div>

<div class="delay-75">延迟 75ms</div>
<div class="delay-100">延迟 100ms</div>
<div class="delay-150">延迟 150ms</div>
<div class="delay-200">延迟 200ms</div>
<div class="delay-300">延迟 300ms</div>
<div class="delay-500">延迟 500ms</div>
<div class="delay-700">延迟 700ms</div>
<div class="delay-1000">延迟 1000ms</div>

<div class="delay-[2000ms]">延迟 2秒</div>

<!-- 常用简写 -->
<div class="transition">默认过渡</div>
<div class="transition-all">所有属性</div>
<div class="transition-colors">颜色属性</div>
<div class="transition-opacity">透明度</div>
<div class="transition-shadow">阴影</div>
<div class="transition-transform">变换</div>

<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded transition-colors duration-200">
  悬停变色
</button>

<div class="hover:scale-105 transition-transform duration-200">
  悬停缩放
</div>

<div class="shadow-md hover:shadow-xl transition-shadow duration-300">
  悬停阴影
</div>

<div class="opacity-50 hover:opacity-100 transition-opacity duration-300">
  悬停淡入
</div>

<div class="bg-white hover:bg-blue-500 text-gray-900 hover:text-white p-4 rounded transition-all duration-300">
  组合过渡效果
</div>

<div class="opacity-0 hover:opacity-100 transition-opacity duration-300 delay-150">
  延迟淡入
</div>

<div class="group bg-white rounded-lg shadow-md hover:shadow-xl p-6 transition-all duration-300 hover:-translate-y-1">
  <h3 class="font-semibold group-hover:text-blue-500 transition-colors">卡片标题</h3>
  <p class="text-gray-600 mt-2">卡片内容</p>
</div>

<button class="bg-blue-500 text-white px-6 py-3 rounded-lg hover:bg-blue-600 hover:scale-105 active:scale-95 transition-all duration-200">
  按钮效果
</button>

<div class="group relative">
  <button class="px-4 py-2">菜单</button>
  <div class="absolute top-full left-0 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
    <div class="bg-white shadow-lg rounded-lg py-2 mt-2">
      <a href="#" class="block px-4 py-2 hover:bg-gray-100">选项 1</a>
      <a href="#" class="block px-4 py-2 hover:bg-gray-100">选项 2</a>
    </div>
  </div>
</div>

<div class="border rounded-lg overflow-hidden">
  <button class="w-full px-4 py-3 text-left hover:bg-gray-50 transition-colors">
    标题
  </button>
  <div class="max-h-0 overflow-hidden transition-all duration-300" id="content">
    <div class="p-4">
      内容区域
    </div>
  </div>
</div>

<div class="fixed inset-0 bg-black/50 opacity-0 invisible transition-opacity duration-300" id="overlay">
  <div class="flex items-center justify-center min-h-screen">
    <div class="bg-white rounded-lg p-6 scale-95 opacity-0 transition-all duration-300" id="modal">
      模态框内容
    </div>
  </div>
</div>

<div class="space-y-4">
  <div class="opacity-0 hover:opacity-100 transition-opacity duration-300 delay-75">项目 1</div>
  <div class="opacity-0 hover:opacity-100 transition-opacity duration-300 delay-150">项目 2</div>
  <div class="opacity-0 hover:opacity-100 transition-opacity duration-300 delay-300">项目 3</div>
</div>

<input class="border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 rounded-lg px-4 py-2 transition-all duration-200" placeholder="输入内容">