动画与过渡 #

┌─────────────────────────────────────────────────────────────┐
│                    Svelte 动画系统                           │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  transition: 进入和离开动画                                  │
│  ├── fade      淡入淡出                                     │
│  ├── fly       飞入飞出                                     │
│  ├── slide     滑动                                         │
│  ├── scale     缩放                                         │
│  ├── draw      SVG 描边                                     │
│  └── blur      模糊                                         │
│                                                             │
│  in: 仅进入动画                                              │
│  out: 仅离开动画                                             │
│                                                             │
│  animate: 元素移动动画（FLIP）                               │
│                                                             │
└─────────────────────────────────────────────────────────────┘

<script>
  import { fade } from 'svelte/transition';
  
  let visible = true;
</script>

<button onclick={() => visible = !visible}>
  Toggle
</button>

{#if visible}
  <div transition:fade>
    This fades in and out
  </div>
{/if}

<script>
  import { 
    fade, 
    fly, 
    slide, 
    scale, 
    blur,
    draw 
  } from 'svelte/transition';
  
  let visible = true;
</script>

<button onclick={() => visible = !visible}>Toggle</button>

{#if visible}
  <div transition:fade>Fade</div>
  <div transition:fly={{ y: 50 }}>Fly</div>
  <div transition:slide>Slide</div>
  <div transition:scale>Scale</div>
  <div transition:blur>Blur</div>
{/if}

<script>
  import { fade, fly, slide } from 'svelte/transition';
</script>

<div transition:fade={{ duration: 500 }}>
  Fade with duration
</div>

<div transition:fly={{ y: 100, duration: 1000, delay: 200 }}>
  Fly with options
</div>

<div transition:slide={{ duration: 300, easing: elasticOut }}>
  Slide with easing
</div>

<script>
  import { fade, fly } from 'svelte/transition';
  
  let visible = true;
</script>

{#if visible}
  <div 
    in:fly={{ y: 50, duration: 300 }}
    out:fade={{ duration: 500 }}
  >
    Different in/out animations
  </div>
{/if}

<script>
  import { fade } from 'svelte/transition';
  
  let items = ['a', 'b', 'c', 'd', 'e'];
  let visible = true;
</script>

<button onclick={() => visible = !visible}>Toggle</button>

{#if visible}
  {#each items as item, i}
    <div in:fade={{ delay: i * 100, duration: 300 }}>
      {item}
    </div>
  {/each}
{/if}

<script>
  function typewriter(node, { speed = 50 }) {
    const text = node.textContent;
    const duration = text.length * speed;
    
    return {
      duration,
      tick: (t) => {
        const i = Math.floor(text.length * t);
        node.textContent = text.slice(0, i);
      }
    };
  }
  
  let visible = true;
</script>

<button onclick={() => visible = !visible}>Toggle</button>

{#if visible}
  <p transition:typewriter={{ speed: 30 }}>
    This text types itself!
  </p>
{/if}

<script>
  import { flip } from 'svelte/animate';
  import { fade } from 'svelte/transition';
  
  let items = [1, 2, 3, 4, 5];
  
  function shuffle() {
    items = items.sort(() => Math.random() - 0.5);
  }
</script>

<button onclick={shuffle}>Shuffle</button>

{#each items as item (item)}
  <div animate:flip transition:fade>
    {item}
  </div>
{/each}

<script>
  import { flip } from 'svelte/animate';
  
  let items = [1, 2, 3, 4, 5];
  
  function shuffle() {
    items = items.sort(() => Math.random() - 0.5);
  }
</script>

{#each items as item (item)}
  <div animate:flip={{ duration: 300, easing: elasticOut }}>
    {item}
  </div>
{/each}

<script>
  import { flip } from 'svelte/animate';
  import { fade, fly } from 'svelte/transition';
  
  let items = $state([
    { id: 1, text: 'Item 1' },
    { id: 2, text: 'Item 2' },
    { id: 3, text: 'Item 3' }
  ]);
  
  function addItem() {
    const id = Math.max(...items.map(i => i.id), 0) + 1;
    items = [...items, { id, text: `Item ${id}` }];
  }
  
  function removeItem(id) {
    items = items.filter(i => i.id !== id);
  }
  
  function shuffle() {
    items = items.sort(() => Math.random() - 0.5);
  }
</script>

<button onclick={addItem}>Add</button>
<button onclick={shuffle}>Shuffle</button>

<ul>
  {#each items as item (item.id)}
    <li animate:flip transition:fade>
      {item.text}
      <button onclick={() => removeItem(item.id)}>×</button>
    </li>
  {/each}
</ul>

<script>
  import { fly } from 'svelte/transition';
  
  let visible = false;
  
  function handleIntroStart() {
    console.log('Intro started');
  }
  
  function handleIntroEnd() {
    console.log('Intro ended');
  }
  
  function handleOutroStart() {
    console.log('Outro started');
  }
  
  function handleOutroEnd() {
    console.log('Outro ended');
  }
</script>

<button onclick={() => visible = !visible}>Toggle</button>

{#if visible}
  <div 
    transition:fly
    on:introstart={handleIntroStart}
    on:introend={handleIntroEnd}
    on:outrostart={handleOutroStart}
    on:outroend={handleOutroEnd}
  >
    Animated element
  </div>
{/if}

<script>
  import { fade } from 'svelte/transition';
  
  let visible = false;
  let actionComplete = false;
  
  function handleOutroEnd() {
    actionComplete = true;
    console.log('Element removed, action complete');
  }
</script>

<button onclick={() => visible = !visible}>Toggle</button>

{#if visible}
  <div 
    transition:fade
    on:outroend={handleOutroEnd}
  >
    Content
  </div>
{/if}

<script>
  import { fly } from 'svelte/transition';
  import { 
    linear,
    easeIn,
    easeOut,
    easeInOut,
    sineIn,
    sineOut,
    sineInOut,
    quadIn,
    quadOut,
    quadInOut,
    cubicIn,
    cubicOut,
    cubicInOut,
    elasticIn,
    elasticOut,
    elasticInOut,
    backIn,
    backOut,
    backInOut,
    bounceIn,
    bounceOut,
    bounceInOut
  } from 'svelte/easing';
</script>

<div transition:fly={{ y: 50, easing: linear }}>Linear</div>
<div transition:fly={{ y: 50, easing: easeOut }}>Ease Out</div>
<div transition:fly={{ y: 50, easing: elasticOut }}>Elastic Out</div>
<div transition:fly={{ y: 50, easing: bounceOut }}>Bounce Out</div>

<script>
  function customEasing(t) {
    return t < 0.5 
      ? 4 * t * t * t 
      : 1 - Math.pow(-2 * t + 2, 3) / 2;
  }
</script>

<div transition:fly={{ y: 50, easing: customEasing }}>
  Custom easing
</div>

<script>
  import { draw } from 'svelte/transition';
  
  let visible = true;
</script>

<button onclick={() => visible = !visible}>Toggle</button>

{#if visible}
  <svg width="200" height="200">
    <path 
      d="M 10 10 L 190 10 L 190 190 L 10 190 Z"
      stroke="red"
      stroke-width="3"
      fill="none"
      transition:draw={{ duration: 2000 }}
    />
  </svg>
{/if}

<script>
  import { draw } from 'svelte/transition';
  
  let visible = true;
</script>

<button onclick={() => visible = !visible}>Toggle</button>

{#if visible}
  <svg width="200" height="200" viewBox="0 0 200 200">
    <circle 
      cx="100" 
      cy="100" 
      r="80"
      stroke="#ff3e00"
      stroke-width="4"
      fill="none"
      transition:draw={{ duration: 1000 }}
    />
  </svg>
{/if}

<script>
  import { fly, fade } from 'svelte/transition';
  import { flip } from 'svelte/animate';
  
  let notifications = $state([]);
  
  function addNotification(type = 'info', message = '') {
    const id = Date.now();
    notifications = [...notifications, { id, type, message }];
    
    setTimeout(() => {
      removeNotification(id);
    }, 3000);
  }
  
  function removeNotification(id) {
    notifications = notifications.filter(n => n.id !== id);
  }
</script>

<div class="notifications">
  {#each notifications as notification (notification.id)}
    <div 
      class="notification {notification.type}"
      animate:flip
      in:fly={{ x: 200, duration: 300 }}
      out:fade={{ duration: 200 }}
    >
      <span>{notification.message}</span>
      <button onclick={() => removeNotification(notification.id)}>×</button>
    </div>
  {/each}
</div>

<button onclick={() => addNotification('info', 'Info message')}>
  Add Info
</button>
<button onclick={() => addNotification('success', 'Success!')}>
  Add Success
</button>
<button onclick={() => addNotification('error', 'Error occurred')}>
  Add Error
</button>

<style>
  .notifications {
    position: fixed;
    top: 1rem;
    right: 1rem;
    width: 300px;
  }
  
  .notification {
    padding: 1rem;
    margin-bottom: 0.5rem;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .info { background: #e3f2fd; color: #1976d2; }
  .success { background: #e8f5e9; color: #388e3c; }
  .error { background: #ffebee; color: #d32f2f; }
</style>

<script>
  import { fade, fly } from 'svelte/transition';
  
  let { isOpen = false, onClose } = $props();
</script>

{#if isOpen}
  <div 
    class="overlay"
    transition:fade={{ duration: 200 }}
    onclick={onClose}
  >
    <div 
      class="modal"
      transition:fly={{ y: -50, duration: 300 }}
      onclick={(e) => e.stopPropagation()}
    >
      <slot />
    </div>
  </div>
{/if}

<style>
  .overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .modal {
    background: white;
    border-radius: 8px;
    padding: 2rem;
    max-width: 500px;
    width: 100%;
  }
</style>

<script>
  import { fade, fly, scale } from 'svelte/transition';
  import { flip } from 'svelte/animate';
  
  let images = [
    { id: 1, src: 'image1.jpg', title: 'Image 1' },
    { id: 2, src: 'image2.jpg', title: 'Image 2' },
    { id: 3, src: 'image3.jpg', title: 'Image 3' }
  ];
  
  let selectedImage = $state(null);
  
  function selectImage(image) {
    selectedImage = image;
  }
  
  function closeModal() {
    selectedImage = null;
  }
</script>

<div class="gallery">
  {#each images as image (image.id)}
    <div 
      class="thumbnail"
      animate:flip
      onclick={() => selectImage(image)}
    >
      <img src={image.src} alt={image.title} />
    </div>
  {/each}
</div>

{#if selectedImage}
  <div 
    class="lightbox"
    transition:fade
    onclick={closeModal}
  >
    <img 
      src={selectedImage.src} 
      alt={selectedImage.title}
      in:scale={{ start: 0.5 }}
      out:fade={{ duration: 100 }}
    />
  </div>
{/if}