Animazione CSS3 su search form in stile Gmail Mobile App

In questo articolo voglio mostrarti come realizzare un campo di ricerca prendendo come modello quello della mobile app di Gmail.
Animazione CSS3 su search form in stile Gmail Mobile App

Scrivere animazioni css performanti

In un articolo precedente ti ho mostrato come scrivere animazioni CSS3 altamente performanti, senza appesantire il browser, in modo che risultino fluide e leggere. Ciò è possibile utilizzando la tecnica dell’hardware acceleration, che sfrutta la composizione dei layer grafici, in modo che le operazioni di rendering vengano delegate alla memoria grafica (GPU).


Forse potrebbero interessarti i seguenti articoli:

  1. Come ottimizzare le animazioni CSS3 per le performance.
  2. Animazioni CSS3 fluide con i layer grafici e hardware acceleration – (upCreative.net)

In questo articolo voglio mostrarti come realizzare un campo di ricerca prendendo come modello quello della mobile app di Gmail: quando un utente seleziona il campo di ricerca nella lista delle email, questo si sovrappone alla barra di navigazione aumentando lo spazio di visualizzazione per i risultati:

aniumazione-CSS3-su-searchbox-html-mobile-app

Vediamo come procedere.

Il markup HTML

Innanzitutto impostiamo il documento realizzando un tipo di layout che contenga gli elementi essenziali per l’esperimento, come la barra di navigazione, un campo di ricerca ed una lista fittizia.

<nav>
    <h1 class="title">Titolo</h1>
</nav>

<section class="search-wrapper">
    <input type="search" placeholder="Cerca nella lista" />
    <i class="fa fa-search"></i>
    <i class="fa fa-times-circle"></i>
</section>

<article>
    <ul class="list">
        <li><a href="#">List item <i class="fa fa-chevron-right"></i></a></li>
        <li><a href="#">List item <i class="fa fa-chevron-right"></i></a></li>
        <li><a href="#">List item <i class="fa fa-chevron-right"></i></a></li>
        ...
    </ul>
</article>

Come possiamo vedere dal codice, la navbar è rappresentata dal tag nav, il contenitore dell’input dal tag section, e il contenitore della lista (ul con classe list) dal tag article.

All’interno del tag section sono stati inseriti il campo di ricerca e due icone della libreria FontAwesome: la prima (fa-search) rappresenta una lente ed indica a cosa serve quel campo, mentre la seconda (fa-times-circle) serve per rimuovere lo stato focus dal campo di testo e reimpostarne il valore vuoto.

Gli stili CSS3

Come prima cosa vediamo come posizionare i tre elementi DOM principali sopra descritti:

nav{
  height: 44px;
  background-color: #F0F0F0;	  
  position: relative; 
  border-bottom: 1px solid #B9B9B9;
  z-index: 0;
  color:#606060; 
}

.search-wrapper{
  top:45px;
  height:45px;
  position:absolute;
  width:100%;
}

.search-wrapper input{
  height:45px;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  border:0;
  border-top:1px solid #FFF;
  border-bottom:1px solid #D9D9D9;

  /* 
  serve a rimuovere gli stili di defualt che webkit atribuisce 
  agli input con type='search' nei dispostivi mobili 
  */
  -webkit-appearance:none;

  /* 
  impostiamo il padding di sinistra e di destra a 30px 
  in modo da lasciare lo sopazio alle icone durante il typing
  */
  padding:6px 30px;
  
  background: #FFF;
  display:block;
  width:100%;
  outline:0;
}

.search-wrapper i{
  position:absolute;
  top:10px;
  font-size: 20px;
}

.search-wrapper i[class*='search']{
  left:6px;
  color:#CCC;
  cursor:default;
}

.search-wrapper i[class*='times']{
  top:0;
  right:0;
  color:#AAA;
  cursor:pointer;
  font-size: 22px; 
  padding:11px;
}

article{
  position:absolute;
  top:90px;
  height:auto;
  width:100%;
  bottom:0;
  font-size: 12px;
  overflow: auto;
}

Tutti e tre gli elementi sono stati posizionati nel documento tramite la proprietà position:absolute, in modo da realizzare un tipo di layout fluido per tutte le risoluzioni. Lo stesso vale per le due icone, anch’esse posizionate in modo assoluto a sinistra e a destra del campo di testo, al quale abbiamo appositamente attribuito un padding di 30px in entrambi i lati.

Poi veniamo al punto focale del codice: la definizione delle animazioni.

L’intento è quello di traslare verticalmente e con codice performante (quindi delegando i processi di esecuzione degli effetti alla GPU), sia la navbar (nav che deve anche dissolversi in trasparenza), che il contenitore dell’input (tag section), che il contenitore della lista (tag article). Quindi procediamo agendo sulla proprietà transition in modo da impostare gli attributi transform per traslare, ed opacity per far apparire o scomparire in dissolvenza:

nav{
  /* 
  aggiungiamo impostando la transition sulla proprietà transform 
  (che sfrutta hardware acceleration e layer grafici) ed opacity   
  */
  -webkit-transition: -webkit-transform .5s ease, opacity .5s ease;
  -moz-transition: -moz-transform .5s ease, opacity .5s ease;
  -ms-transition: -ms-transform .5s ease, opacity .5s ease;
  -o-transition: -o-transform .5s ease, opacity .5s ease;
  transition: transform .5s ease, opacity .5s ease;
}

.search-wrapper{
  /* 
  aggiungiamo impostano la transition sulla proprietà transform 
  (sfrutta hardware acceleration e layer grafici)        
  */    
  -webkit-transition: -webkit-transform .5s ease;
  -moz-transition: -moz-transform .5s ease;
  -ms-transition: -ms-transform .5s ease;
  -o-transition: -o-transform .5s ease;
  transition: transform .5s ease;
}

article{
  /*aniamzione sul transform (sfrutta hardware acceleration e layer grafici)*/
  -webkit-transition: -webkit-transform .5s ease;
  -moz-transition: -moz-transform .5s ease;
  -ms-transition: -ms-transform .5s ease;
  -o-transition: -o-transform .5s ease;
  transition: transform .5s ease;
}

Inoltre visto che vogliamo far mostrare e nascondere in dissolvenza anche l’icona di rimozione del testo dall’input (classe fa-times-circle), impostiamo lo stesso tipo di effetto anche in questo caso, utilizzando però solamente la proprietà opacity:

.search-wrapper i[class*='times']{        
  /* 
  inizialmente  l'icona di annullamento inserimento non deve essere visibile 
  per cui impostiamo la sua opacity a 0 e settiamo l'animazione su questa proprietà
  (sfrutta hardware acceleration e layer grafici)
  */
  opacity:0;
  -webkit-transition: opacity .5s ease;
  -moz-transition: opacity .5s ease;
  -ms-transition: opacity .5s ease;
  -o-transition: opacity .5s ease;
  transition: opacity .5s ease;
}

Definite quindi le proprietà che danno il via alle animazioni, procediamo definendo in quali situazioni i rispettivi valori debbano cambiare.

Siccome tutti gli elementi da modificare sono direttamente inseriti nel body, possiamo modificare tali valori nel caso in cui quest’ultimo presenti una certo tipo di classe:

.search-focus nav{
  opacity: 0;
  -webkit-transform: translateY(-45px);
  -moz-transform: translateY(-45px);
  -ms-transform: translateY(-45px);
  -o-transform: translateY(-45px);
  transform: translateY(-45px);
}

.search-focus .search-wrapper,
.search-focus article{
  /*trasliamo il contenitore della lista di -45px (pari all'altezza della nav bar) sull'asse delle Y */
  -webkit-transform: translateY(-45px);
  -moz-transform: translateY(-45px);
  -ms-transform: translateY(-45px);
  -o-transform: translateY(-45px);
  transform: translateY(-45px);
}

.search-focus .search-wrapper i[class*='times']{
  /*
  rendiamo visibile il pulsante di rimozione del contenuto dell'input
  */
  opacity:1;
}

/* appena viene avviata l'animazione nascondiamo la classe helper*/
.search-focus .helper{
  display: none;
}    

.search-focus article{
  /*
  impostiamo la fine del contenitore della lista a -45px 
  per fare in modo che rimanga in fondo alla finestra 
  (visto che lo abbiamo traslato di -45px sull'asse delle Y per coprire la navbar)
  */
  bottom:-45px;
}

Come possiamo vedere i valori vengono modificati nel momento in cui al body viene attribuita la classe search-focus, dando il via alle animazioni desiderate.

Ultimo step: qualche linea di codice Javascript

Una volta definito il comportamento degli stili CSS3, basterà aggiungere la classe search-focus per scatenare l’animazione.

In particolare, per stare in linea con la mobile app di Gmail, appena l’utente effettua il focus sull’input di ricerca, vogliamo che si scateni l’animazione, mente nel momento in cui si verifica l’evento blur, dovremmo ritornare allo stato iniziale:

$(function(){    
  var input = $("input"),
  helper = $(".helper"),
  searchWrapper = $("section");

  /* 
  aggiungiamo e togliamo la classe "search-focus" agli eventi di focus e blur dell'input, 
  avviando l'animazione che ripristina lo stato iniziale degli elementi DOM
  */
  
  input.on("focus", function(){
    //ritardiamo qualche millisecondo per aspettare l'animazione di comparsa della 
    //tastiera dell'input sia finita, in quanto potrebbe interferire con quella dei 
    //nostri effetti CSS3
    setTimeout(function(){
      $("body").addClass("search-focus");	
      }, 30);	    		
  })
   
  .on("blur", function(){
    $("body").removeClass("search-focus");
  }); 		

  /*
  sul keyup dell'input controlliamo la lunghezza del valore immesso e visualizziamo o meno
  l'icona di rimozione e richiamiamo il blur per ripristinare tutto allo stato iniziale
  */

  /* al click dell'icona di rimozione rimuoviamo il testo dell'input */
  $("i[class*='times']").on("click", function(){
    input.val("").trigger("blur");
  });

});

Il gioco è fatto!

Conclusioni

Questo tutorial dimostra che qualunque web designer può realizzare applicazioni mobile fluide e performanti utilizzando HTML5, CSS3 e Javascript. In particolare, se vengono usate le giuste proprietà nei fogli di stile, è possibile realizzare dei prodotti che non hanno nulla da invidiare ad applicazioni realizzate con codice nativo.

E tu cosa ne pensi? Hai mai realizzato mobile app ibride o interamente in HTML5, CSS e Javascript?

Provalo subito

Prova la demo Consulta il codice

Crea la tua mobile app in HTML, CSS3 e Javascript

Crea la tua mobile app in HTML, CSS3 e JavascriptHey! Sto scrivendo un e-book su come aumentare le performance e la fluidità per le tue HTML mobile app! Segui i consigli e le tecniche di cui mi sono servito per creare oltre 10 applicazioni mobile, tra cui due progetti personali: Tint Weather App e Dieta SI o NO?. Se anche tu sei un web designer e vuoi realizzare la tua applicazione da distribuire nei vari stores, forse sarai interessato al mio e-book: HTML Mobile Accelerato. Grazie ad esso verrai a conoscenza di tutte quelle tecniche che renderanno la tua applicazione mobile fluida e reattiva come quelle native.

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github