Multiple transitions for Twitter bootstrap .transition?

Question

I am wanting to animate two properties in Bootstrap v2.1.0,

The opacity and the margin.

I have tried:

.transition(opacity 0.5s, margin 0.25s);: No output
.transition('opacity 0.5s, margin 0.25s');: Invalid CSS output
.transition(opacity 0.5s); .transition(margin 0.25s);: Margin overrides opacity.

Note that I am using lessphp so solutions that use the JavaScript regex will not work.

I know I could copy the mixin and modify it to accept two parameters as well, but that just seems hacky, surely there is a better way?

Answer 1

Two Options (Depending on version of LESS)

LESS (1.3.3+)

The less2css.org shows this works with LESS 1.3.2 on experimentation, but the issue documentation seems to indicate this is a 1.4 release addition.

Whenever it became effective, at some point, the semicolon was introduced as a possible variable separator in parametric mixins while still allowing commas. The presence of a ; causes commas to be viewed not as separating variables, but rather as part of the value of the variable itself (a comma separated list). This then allows (to quote the site) us to use a "dummy semicolon to create mixin call with one argument containing comma separated css list."

Therefore the following works to produce the same output as above without the escaped string (NOTE the "dummy" semicolon put at the end of the variable entry, right before the closing parenthesis of the parametric mixin call):

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

LESS (pre 1.3.3, but also works in later versions)

Do a string interpolation (~) for the passed in variables:

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

Both solutions output:

-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;