Stava chiedendo se ci fosse un modo per fare una transizione css quando a div viene data una certa classe. Il mio miglior esempio è questo sito http://ideaware.co/Provare a fare una transizione CSS su un cambio di classe

Quando si scorre verso il basso e l'intestazione diventa fissa, cambia colore di sfondo e ha l'opacità. Davvero bello.

Sto lavorando su un modello che ho qui http://www.niviholdings.com/collide/ e quello che voglio fare è quando il < nav> diventa fisso, voglio il < ul> per far scorrere verso destra.

Speriamo di spiegarlo correttamente.

fonte

2013-04-23 Constant Collide

Affascinante! Il tuo codice sembra perfettamente giusto! Non ho idea del perché non funzioni. –

Deve essere il mio CSS quindi far sì che la classe venga aggiunta ed è marginale, giusto, non sta applicando la transizione. –

Penso che sia il js, solo non so perché. Chrome esegue la transizione ma con un riposizionamento prima dell'animazione. Penso che possa avere qualcosa a che fare con l'ordine in cui applichi le classi. –

2 punti ho trovato che può aiuto:

Transizioni da auto a un valore fisso potrebbe essere un problema. Alla fine, potresti provare a impostare margin-left di .main-nav-ul su un valore fisso per impostazione predefinita, non solo quando è appiccicoso.

Il secondo è (e questo è un hacky). Provate ad applicare la classe per il .main-nav-ul ritardo:

setTimeout(function() { 
    $('.main-nav-ul').addClass('nav-slide'); // line 57 in jquery.sticky.js 
}, 100);

fonte

2013-04-23 19:33:05

Buona chiamata sull'auto, era sicuramente nervosa in Chrome, non usando quella fissa automatica. Devo ancora provare il timeout ... –

Questo succedeva, quando avrò abbastanza rep, vi inviterò tutti per aiutarvi :) il ritardo lo fa funzionare in FF. –

perché il timeout fa il trucco? Voglio dire, funziona !! Ma perché? Non dovrebbe funzionare senza un timeout? –

transizioni CSS in 4 semplici passi

Assicurarsi che ciò che si vuole fare è possibile con le transizioni CSS. Puoi farlo entro il checking the W3C docs.
Aggiungi la transizione e lo stile di partenza al tuo elemento base.
Aggiungere una classe o uno stato con stili modificati.
Aggiungere un meccanismo per aggiungere la classe (se applicabile).

esempio rapido, diciamo che si desidera animare un cambiamento margine sul :hover. Faresti solo fare questo:

element { 
    margin-left: 10px; 
    transition: margin-left linear .5s; 
} 

element:hover { 
    margin-left: 0; 
}

And here's a quick demo.

fonte

2013-04-23 18:45:29 Shauna

Sta usando una pseudo classe. Nell'esempio e nel mio esempio è un'intestazione o un nav che voglio che la transizione venga applicata quando raggiunge un punto (o si attacca in alto). Il primo collegamento nel mio esempio lo sta facendo in qualche modo. –

@ user2312618 - Molto probabilmente, è JavaScript. Basta impostare il codice JavaScript per aggiungere una classe quando viene attivato un determinato altro evento, ad esempio quando l'intestazione viene corretta. – Shauna

Sì, l'ho provato, penso sia perché è la lista degli ul che voglio spostare ma lo < nav > è la cosa che diventa effettivamente appiccicosa. (la lista non ordinata si trova nell'elemento nav). –

Certo che puoi ...

#someElement { 
    background: red; 
    position: relative; 
    -webkit-transition: all 1s linear; 
    -moz-transition: all 1s linear; 
    -o-transition: all 1s linear; 
    transition: all 1s linear; 
    left: 0; 
} 

#someElement.someClass { 
    background: green; 
    left: 50px; 
}

DEMO

fonte

2013-04-23 18:46:10 Turnip

Può essere fatto senza il clic? Come quando a < ul > viene assegnata una classe? Fondamentalmente voglio solo la mia lista non ordinata per marginare alcuni pixel quando raggiunge la cima e diventa "appiccicoso". –

Il clic era solo un modo di aggiungere una classe. Quindi sì, questo è esattamente ciò che mostra l'esempio. Come stai aggiungendo la tua classe? – Turnip

Stavo facendo un .addClass all'interno del jquery.sticky.js fornito con il modello. Appena aggiunto nella sezione in cui si verifica la posizione attuale fissa. –

Provare a fare una transizione CSS su un cambio di classe

risposta

transizioni CSS in 4 semplici passi

Problemi correlati