---
name: fade-in
description: Usare quando l'utente vuole applicare un effetto di dissolvenza in entrata (fade-in) a elementi DOM.
---

# Fade In

Questa skill applica un effetto di transizione fluida dove un elemento passa da invisibile (opacity: 0) a completamente visibile (opacity: 1). Utile per animazioni di entrata, reveal di contenuti e transizioni UI.

## Procedura

1. **Applicare fade-in**: Usare `fadeIn(elemento, durata)`
2. **Specificare la durata**: La durata è in millisecondi (predefinito: 2000ms)
3. **Animare più elementi**: Applicare a ciascun elemento con durate scalari per effetto a cascata

## Regole

- `elemento` deve essere un nodo DOM valido
- `durata` deve essere un numero positivo (millisecondi)
- L'elemento deve avere `opacity: 0` inizialmente per vedere l'animazione
- La proprietà `transition` viene applicata direttamente allo stile inline
- Restituisce `undefined` (modifica l'elemento direttamente)

## Esempi

### Esempio 1: Fade-in semplice

```javascript
const myElement = document.getElementById('myElement');
myElement.style.opacity = 0; // Assicurarsi che sia invisibile inizialmente
fadeIn(myElement, 1000); // 1 secondo
```

### Esempio 2: Fade-in al caricamento della pagina

```javascript
document.addEventListener('DOMContentLoaded', () => {
    const elements = document.querySelectorAll('.fade-me');
    elements.forEach(el => {
        el.style.opacity = 0;
        fadeIn(el, 1500);
    });
});
```

### Esempio 3: Effetto a cascata

```javascript
const boxes = document.querySelectorAll('.box');
boxes.forEach((box, index) => {
    box.style.opacity = 0;
    setTimeout(() => {
        fadeIn(box, 200 + index * 200);
    }, index * 200);
});
```

### Esempio 4: Fade-in con durata personalizzata

```javascript
fadeIn(document.getElementById('header'), 500); // 0.5 secondi (veloce)
fadeIn(document.getElementById('content'), 3000); // 3 secondi (lento)
```

## Dettagli Aggiuntivi

- **Meccanismo**: Imposta `opacity: 0`, poi `opacity: 1` con transizione CSS
- **requestAnimationFrame**: Garantisce che la transizione venga applicata correttamente
- **Timing functions**: Supporta tutte le timing functions CSS (`ease`, `linear`, `ease-in`, `ease-out`, `ease-in-out`, `cubic-bezier()`)
- **Timing function predefinita**: `ease` (inizia lento, accelera, finisce lento)
- **Note**: Se l'elemento ha già `opacity != 0`, l'animazione non sarà visibile
- **Reset**: Per resettare, impostare `element.style.opacity = 0` e richiamare `fadeIn()`