Articles of css transitions

Come posso usare transitionend in jQuery?

Devo rilevare se una transizione CSS è completata prima di consentire a una funzione di ripetere nuovamente, per evitare di incasinare i margini. Quindi, come cam ho qualcosa come if (transitionend == true) { // do stuff } else { // do nothing }

Distriggerszione di Twitter Bootstrap Navbar Animazione di transizione

Proprio come http://twitter.github.com/bootstrap , Il sito su cui sto lavorando ora è reattivo. Vorrei rimuovere l’ animazione di transizione quando faccio clic sul pulsante di menu della barra di navigazione compressa. Sopra l’immagine è lo screenshot di quello che sto chiedendo. A TOP-RIGHT-CORNER , c’è un pulsante menu a tre linee.

Larghezza automatica della transizione CSS

Ho un elemento la cui larghezza mi piacerebbe animare quando il suo contenuto cambia. Ha width: auto , e questo non cambia mai. Ho visto questo trucco , ma questo è per la transizione tra due valori e uno è impostato. Non sto manipolando affatto i valori, solo il contenuto, e mi piacerebbe che la […]

quando ridimensiona un elemento con la scala css3, diventa pixel fino a quando l’animazione non è completa. Sto animando un elemento con un bordo

http://jsfiddle.net/nicktheandroid/5Ytnj/ Quando aggiungo -webkit-backface-visibility: hidden; all’elemento .circ , fa sì che rimanga pixelato anche dopo che l’animazione è stata completata. Mi chiedo se c’è un modo per farlo sparire durante l’animazione. L’ho visto nella versione di sviluppo di Google Chrome.

La combinazione di animazione e transizione non funziona correttamente

Ho cercato di inserire alcune animazioni CSS3 di base. L’objective è di triggersre una class sull’evento click di un pulsante e animare un div in base alla class aggiunta. Il codice funziona perfettamente per la prima iterazione di triggerszione in Firefox, ma per altri browser come Chrome e per la successiva iterazione in Firefox la […]

Posso applicare una transizione CSS alla proprietà di overflow?

Sto cercando di impostare un transition-delay di transition-delay alla proprietà di overflow del body quando viene fatto clic su un div aggiungendo una class al body come segue: $(“div”).click(function(){ $(“body”).addClass(“no_overflow”); }); div{ background:lime; height:2000px; } .no_overflow{ overflow:hidden; } body{ overflow:auto; transition: overflow 0 2s; } I’m div Tuttavia, questo non sembra funzionare (non c’è ritardo). […]

Supporto Webkit per transizioni di gradienti

Mi chiedo se qualcuno sappia quando il webkit supporterà le transizioni dei gradienti? ad esempio, il seguente codice non funziona in Chrome 6 (supponendo che grad-transition sia un collegamento): .grad-transition { background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(black)); -webkit-transition: background-image .5s; } .grad-transition:hover { background-image: -webkit-gradient(linear, 0 0, 0 100%, from(black), to(white)); }

Sfondo bicolore diviso per linea diagonale usando css

Sto cercando di creare uno sfondo usando css dove un lato è un colore solido e l’altro è una trama: i due sono divisi da una linea diagonale. Mi piacerebbe che fossero due div separate perché ho intenzione di aggiungere un po ‘di movimento con jQuery, dove se si fa clic sulla destra, il triangolo […]

Less CSS: Mixins con Variable Number of Arguments

MENO consente mixin parametrici come: .transition(@property, @duration){ transition: @property @duration; -moz-transition: @property @duration; /* Firefox 4 */ -webkit-transition: @property @duration; /* Safari and Chrome */ -o-transition: @property @duration; /* Opera */ } Tuttavia, questo non funziona sempre con proprietà come le transizioni. Se si sta provando ad avere transizioni multiple e si tenta di chiamare […]

IE 10 + 11: le transizioni CSS con calc () non funzionano

Sto animando un contenitore sul passaggio del mouse da destra a sinistra con le transizioni CSS. Funziona bene in tutti i browser eccetto Internet Explorer. Il motivo è che sto usando (e ho bisogno di usare) calc () nella mia proprietà sinistra CSS. Ho creato una demo live qui: Live Demo Il CSS si presenta […]