Frage Mehrere Übergänge für Twitter Bootstrap. Transition?


Ich möchte zwei Eigenschaften in Bootstrap v2.1.0 animieren,

Das opacity und das margin.

Ich habe versucht:

.transition(opacity 0.5s, margin 0.25s);: Keine Leistung
.transition('opacity 0.5s, margin 0.25s');: Ungültige CSS-Ausgabe
.transition(opacity 0.5s); .transition(margin 0.25s);: Rand überschreibt Deckkraft.

Beachten Sie, dass ich verwende wenigerphp Lösungen, die den JavaScript-Regex verwenden, funktionieren nicht.

Ich weiß, dass ich das Mixin kopieren und modifizieren könnte, um auch zwei Parameter zu akzeptieren, aber das scheint nur hacky zu sein, sicherlich gibt es einen besseren Weg?


23
2017-10-25 09:14


Ursprung


Antworten:


Zwei Optionen (abhängig von der Version von LESS)

WENIGER (1.3.3+)

Das less2css.org Zeigt, dass dies mit LESS 1.3.2 beim Experimentieren funktioniert, aber die Ausgabedokumentation scheint dies zu zeigen eine 1,4 Release-Zugabe.

Wann immer es in Kraft trat, wurde das Semikolon irgendwann als mögliches Variablentrennzeichen in parametrischen Mixins eingeführt, wobei Kommas immer noch zulässig waren. Die Anwesenheit von a ; bewirkt, dass Kommas angezeigt werden nicht als trennende Variablen, sondern als Teil der Wert der Variablen selbst (eine durch Komma getrennte Liste). Dies erlaubt dann (zu zitieren Sie die Website) Wir verwenden ein Dummy-Semikolon, um einen Mix-Aufruf mit einem Argument zu erstellen, das eine Komma-getrennte CSS-Liste enthält.

Daher funktioniert das Folgende, um dieselbe Ausgabe wie oben zu erzeugen ohne die Escape-Zeichenfolge (HINWEIS das "Dummy" -Semikolon am Ende des Variableneintrags, rechts Vor die schließende Klammer des parametrischen Mixin-Aufrufs):

.transition(opacity 0.5s, margin 0.25s;);
                                      |
                                semicolon here

WENIGER (vor 1.3.3, funktioniert aber auch in späteren Versionen)

Führen Sie eine String-Interpolation durch (~) für die übergebenen Variablen:

.transition(~"opacity 0.5s, margin 0.25s");

Beide Lösungen ausgeben:

-webkit-transition: opacity 0.5s, margin 0.25s;
-moz-transition: opacity 0.5s, margin 0.25s;
-o-transition: opacity 0.5s, margin 0.25s;
transition: opacity 0.5s, margin 0.25s;

63
2017-10-28 00:26