Guida · Il comportamento
I trigger: cosa fa scattare cosa
Dieci cause dichiarate. Il clic è la più ovvia e la meno interessante: le altre nove sono quelle che fanno sembrare vivo un sito.
Dove siamo
Finora tutto partiva da un clic. Alla fine di questo capitolo avrai qualcosa che scatta senza che nessuno tocchi niente.
Il gesto
Prendi un blocco che sta a metà pagina.
Nel suo uiState.effects metti trigger: on:viewportEnter e un’animazione.
Salva, ricarica, scorri.
// il uiState di un blocco, in Payload
{
"uiState": {
"effects": [
{ "trigger": "on:viewportEnter", "animate": "animate:fadeB" }
]
}
}Le dieci cause
Quattro vengono dal DOM: on:click, on:change, on:submit, on:hover. Una viene dal ciclo di vita: on:mount, che scatta quando il nodo entra in pagina.
Tre vengono dallo scorrimento: on:viewportEnter quando il nodo entra, on:viewportLeave quando esce, on:viewportProgress che dà un valore continuo mentre lo attraversa.
Due vengono da dentro il sistema: on:event, che scatta quando arriva un evento, e on:stateChange, che scatta quando cambia un pezzo di stato. Sono quelle che permettono a un blocco di reagire a qualcosa che è successo altrove.
Le dieci cause, per nome
'on:click' 'on:change' 'on:submit' 'on:hover' 'on:mount' 'on:viewportEnter' 'on:viewportLeave' 'on:viewportProgress' 'on:event' 'on:stateChange'
Perché `viewportProgress` non è la percentuale visibile
Quanto di un nodo si vede è un valore che sale e riscende: dice «metà» due volte, entrando e uscendo. Non è pilotabile.
Il valore utile è quanto il nodo ha attraversato il viewport: monotono, quindi collegabile a qualcosa che avanza. È calcolato con una batteria di soglie sull’osservatore e non con un ascoltatore dello scorrimento — così non c’è niente da limitare a mano.
Quando non funziona
Metti on:viewportEnter su un blocco che sta già dentro lo schermo al caricamento. Scatta subito, e sembra che non abbia funzionato.
Vale come regola generale: prima di dare la colpa al trigger, chiediti se la condizione era già vera quando la pagina si è aperta.
Avanti
Sai far partire le cose. Quello che manca è dove i blocchi si ricordano qualcosa: lo stato.