I-001 Modal Animation | Vibe UI Pattern Library

ライブデモ Live Demo

モーダルがフェードインしながらスケールアップして表示されます。背景オーバーレイも同時にフェードインします。アニメーション速度を調整できます。

Modal fades in while scaling up. Background overlay fades in simultaneously. Adjust animation speed.

アニメーション速度 Animation Speed 0.3s

AI向け説明 AI Description

`I-001` は `.active` クラスの追加/削除でモーダルの表示/非表示を切り替えます。背景とコンテンツの両方に `opacity` と `transform: scale()` を適用し、同時にアニメーションさせます。

`I-001` toggles modal visibility by adding/removing `.active` class. Applies `opacity` and `transform: scale()` to both backdrop and content, animating simultaneously.

調整可能パラメータ Adjustable Parameters

--modal-duration — アニメーション継続時間 animation duration
--modal-scale-from — 開始時のスケール値 initial scale value
backdrop blur — 背景にブラー効果を追加 add blur effect to backdrop
enter direction — スライド方向の変更（上、下、左、右） change slide direction (top, bottom, left, right)

実装 Implementation

HTML + CSS + JS

<button data-open-modal>Open</button>
<div class="modal-backdrop" data-modal>
  <div class="modal-content">
    <button data-close-modal>×</button>
    <h3>Title</h3>
    <p>Content</p>
  </div>
</div>

<style>
.modal-backdrop {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  transform: scale(0.9);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.modal-backdrop.active .modal-content {
  transform: scale(1);
  opacity: 1;
}
</style>

<script>
const modal = document.querySelector("[data-modal]");
const openBtn = document.querySelector("[data-open-modal]");
const closeBtn = document.querySelector("[data-close-modal]");

openBtn.addEventListener("click", () => modal.classList.add("active"));
closeBtn.addEventListener("click", () => modal.classList.remove("active"));
modal.addEventListener("click", (e) => {
  if (e.target === modal) modal.classList.remove("active");
});
</script>

React (JSX + CSS)

// react/I-001.jsx
import { useState } from "react";
import "./I-001.css";

export default function ModalAnimation() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      {isOpen && (
        <div className="modal-backdrop active" onClick={() => setIsOpen(false)}>
          <div className="modal-content" onClick={(e) => e.stopPropagation()}>
            <button onClick={() => setIsOpen(false)}>×</button>
            <h3>Title</h3>
            <p>Content</p>
          </div>
        </div>
      )}
    </>
  );
}

/* react/I-001.css */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-backdrop.active {
  opacity: 1;
}

AIへの指示テンプレート AI Prompt Template

以下のテンプレートをコピーしてAIアシスタントに貼り付けると、このパターンの実装を依頼できます。 Copy the template below and paste it into your AI assistant to request an implementation of this pattern.

以下のUIパターンを実装してください。

- パターンID: I-001
- パターン名: モーダルアニメーション
- 参照URL: https://devsnips.dev/animations/I-001.html
- フレームワーク: [React / Vue / Vanilla JS / その他]
- 要件:
  - デザインは参照URLのデモに準拠
  - レスポンシブ対応（モバイル/デスクトップ）
  - アクセシビリティ考慮（キーボード操作、スクリーンリーダー）
  - [ここに追加の要件を記述]

Please implement the following UI pattern.

- Pattern ID: I-001
- Pattern Name: Modal Animation
- Reference URL: https://devsnips.dev/animations/I-001.html
- Framework: [React / Vue / Vanilla JS / Other]
- Requirements:
  - Follow the design from the reference URL demo
  - Responsive (mobile / desktop)
  - Accessibility (keyboard navigation, screen reader)
  - [Add your requirements here]

注意とバリエーション Notes & Variations

ESCキーで閉じる機能や、フォーカストラップ（モーダル内でフォーカスを循環させる）を実装してください。`aria-modal` と `role="dialog"` でアクセシビリティを向上させてください。

Add ESC key to close and focus trap (cycle focus within modal). Improve accessibility with `aria-modal` and `role="dialog"`.