Animazione CSS per passaggio mouse e touch (iOS)

Ecco plnkr example.Animazione CSS per passaggio mouse e touch (iOS)

In sostanza v'è uno stile del genere

.hover-block { 
    -webkit-transition: all 1s linear; 
      transition: all 1s linear;  

} 

.hover-block:active { 
    pointer-events: none; 
    -webkit-transform: scale(1.5); 
      transform: scale(1.5); 
} 

.hover-block:hover { 
    -webkit-transform: scale(1.5); 
      transform: scale(1.5); 
}

sto cercando di sostenere sempreverde e IE10/11, Chrome per Android (4.4+), Safari Mobile (iOS 7+), ed è shouldn' ferire altri eventi di tocco (scorrimento a scorrimento).

Sembra funzionare come previsto per l'emulazione di dispositivi Android e Chrome, la trasformazione non appiccicosa al tatto è il comportamento desiderato.

Ma in qualche modo questo plunker non funziona su iOS webkit (iOS 8, tutti i browser), non fa nulla al tatto. Sono abbastanza sicuro che esattamente lo stesso approccio (l'elemento di blocco :active con più :hover) ha funzionato per me in iOS 8 prima. Come può essere aggiustato?

Sembra touchend gestore vuoto TouchStart/JS evento o ontouchstart/ontouchend attributo can activate touch behaviour on iOS (non posso essere sicuro, ma è possibile che è successo a me prima). È una soluzione nota per il problema o ci sono meno hacky, che sono influenzate dalle versioni di iOS?

fonte

2015-06-16 estus

Fa: focus fare qualcosa? – BillyNate

@BillyNate No, non c'è cambiamento. – estus

Penso che non ci sia una soluzione migliore per la tua situazione (. –

Quindi il problema che stai incontrando è questo: "The :active pseudo class matches when an element is being activated by the user". Un elemento standalone <div> non può essere attivato dall'utente e pertanto non verrà compensato dalla pseudo classe :active.

Se si guarda sotto Browser Compatibility nell'articolo :active MDN vedrai che:

[1] Per impostazione predefinita, Safari Mobile non utilizza i: stato attivo a meno che non ci sia un gestore touchstart evento sul elemento rilevante o sullo <body>.

MDN ha un list of pseudo classes che può essere utilizzato e si potrebbe essere in grado di trovare uno che si adatta meglio la vostra situazione o l'aggiunta di un evento touchstart dovrebbe fare il trucco in Safari.

sono stato in grado di ottenere il vostro plnkr lavorando molto veloce modificando l'elemento <div class="hover-block"></div>-<button class="hover-block"></button> e cambiando .hover-block:active {-.hover-block:focus {. Ho anche aggiunto display: block; border: 0; a .hover-block.

È, per ovvie ragioni, non può decidere di cambiare il vostro <div> ad un <button> per ottenere l'effetto di lavorare, ma utilizzando un elemento che può essere attivato, utilizzando una diversa classe pseudo, o l'aggiunta di un evento che consente l'attivazione nel browser di destinazione, dovresti essere in grado di ottenere l'effetto che stai cercando sui dispositivi mobili.

Spero che questo aiuti!

fonte

2015-07-14 22:37:53

Grazie per la spiegazione. Quindi questo è il comportamento previsto e non un trucco. [Guida di Google] (https://developers.google.com/web/fundamentals/input/touch/activestates/index#enabling-active-state-support-on-ios) afferma che è necessario anche per i pulsanti. Hai un'idea del motivo per cui l'hanno fatto? È ': focus' nel tuo esempio che dovrebbe fare la differenza? – estus

Scusa, no, non ho idea del motivo per cui l'hanno fatto in questo modo, controllando le specifiche potrebbe fornire più informazioni di base su questo. Ho usato solo: concentrati sul mio esempio poiché era un modo veloce e sporco per ottenere l'effetto desiderato ed era facile da illustrare sia sul desktop che sul cellulare. Probabilmente opterei per: attivo e touchstart nella tua situazione. –

nel codice HTML, invece di <body>, fare <body ontouchstart=""> O in HTML5, solo <body ontouchstart>

fonte

2015-07-19 01:37:32

Ho accettato una risposta pochi minuti fa, ma sembra un'ottima risposta. Sembra che possa correggere il tocco per tutti gli elementi della pagina. – estus

Animazione CSS per passaggio mouse e touch (iOS)

risposta

Problemi correlati