Transitions

[niallobrien]

Hi, I'm just wondering what are peoples' thoughts about perhaps including some transition-based utility classes?
Nothing too complex, just to cover some common use-cases, eg. smooth hover state transitions on buttons etc. If so, what kind of syntax would you expect to use to keep in line with Tailwind's current naming conventions?

[fourstacks]

Was just thinking this would be great to have baked in too. Like you say - best to keep things simple and reserve any utility classes to basic transitions like button hover states etc.

I've never really figured out if there's any performance downside to using the 'all' keyword when setting up css transitions e.g. transition: all 200ms ease. If not then initially it might make sense to make this the default transition property. If you assume that as a default then the two parts of the declaration left are duration and easing.

As far as easing goes it would probably be nice to be able to specify an easing type but in practise that might be kinda cumbersome (it would certainly increase the number of potential class names). If the basic use case is for buttons and other interactive elements I'd be happy with something like 'ease' which generally looks pretty good.

If that just leaves us with timing then I guess having something like the opacity property in the config file would probably work e.g.:

transition: {
    '200': '200ms',
    '400': '400ms',
    '800': '800ms'
  },

To output a class like: .transition-400

Or maybe go with a keyword based approach more like shadows, something like

transition: {
    'fast': '200ms',
    'medium': '400ms',
    'slow': '800ms'
  },

Then: .transition-fast

These are just initial thoughts - I've probably (or more likely definitely!) not considered all the angles but I agree that it would be great to see something like this in the framework

[niallobrien]

I like the keyword based approach you suggested.

[m1guelpf]

@niallobrien Why did you close this?

[niallobrien]

That's strange...I didn't. 4 hours ago would've been 7am my time, just as I was getting up for work...
@adamwathan Should we reopen this or take it to the new discussion area I saw you mention on Twitter?
Thanks.

[kbond]

I'd reopen as it is a feature request.

[adamwathan]

Reopened!

[sebastiandedeyne]

I'd like to see easing in the config, even if it's simply to provide your easing method of choice as default.

Both should have a default value too to allow a shorthand.

transitionDurations: {
  default: 200,
  'slow': 1000,
  // ...
},
transitionTimingFunctions: {
  default: 'linear',
  'ease-in-out': 'ease-in-out',
  // ...
},

Some example generated classes:

.transition (uses default for both)
.transition-200 (uses default timing function)
.transition-200-ease-in-out (everything specified)

Alternative idea: split easing and durations (.transition-200 .transition-ease-in-out).This we could also add transitionProperties config key so it isn't always all. Don't know how useful this is though.

Final thought: transitionTimingFunctions is the "correct" name for the setting. Might be better to use something friendlier.

[MichaelDeBoey]

I think the best way to implement this, is to do something similar like we did with the border utilities.

[bshoults]

I prefer the keyword based approach as well. As with the shadows, Tailwind makes some design decisions on how the shadow should look which is easy enough to customize. As with the shadow feature, it uses a default value as stated above. I think something like the below is just enough to be effective.

.transition (fast by default)
.transition-medium (or to be consistent, do we need to use 'md' like the shadow does?
.transition-slow

[aarondfrancis]

I'm currently using the slow/md/fast convention in my project, but have also found it useful to have an instant with duration set to 0. (None would work too.)

[perkola]

What is the current process on this feature? Would it also be possible to add transition timings following the same convention as i.e. the border styles; border-solid, border-dashed but transition-ease, transision-linear instead?

Edit: referring to the transitionTimingFunctions mentioned by @sebastiandedeyne.

[inxilpro]

This is what I currently have in my custom utilities:

.trans {
    transition: all .25s;
}

.trans-bg {
    transition-property: background;
}

.trans-slow {
    transition-duration: .5s;
}

.trans-slower {
    transition-duration: .5s;
}

.trans-fast {
    transition-duration: .15s;
}

.trans-faster {
    transition-duration: .075s;
}

That way all of these work:

<div class="trans" /> <!-- Sane default -->
<div class="trans trans-bg" /> <!-- Background instead of all, must put .trans first -->
<div class="trans trans-fast" /> <!-- Transition quicker -->

I could also see doing something like:

*, :after, :before {
    transition-duration: .25s;
    transition-property: none;
}
.trans {
    transition-property: all;
}

And then keep the rest the same (kind of how borders are currently set by tailwind). I'm not 100% sure if that would break lots of 3rd-party CSS, though.

Finally, I think that the timing functions should be their own classes:

.trans-linear {
    transition-timing-function: linear;
}
/* etc */

[rightaway]

@inxilpro Are those custom utilities just in a css file or is there a way to set them in tailwind.js and have them be generated?

[inxilpro]

@rightaway Take a look at my tailwind plugin — they can be fully configured if you use the plugin, or else you can just copy-and-paste the above if you just want a quick-and-dirty solution.

[Vidhya-Dilip]

We can add common utilities which are not present in tailwind by default, in plugins section of tailwind.config.js as 'addUtilities' function.
https://tailwindcss.com/docs/plugins

[louisjrdev]

Will this be merged into the core project this is kind of make or break to be honest?

[adamwathan]

@louisjacksonrees planning to explore the API for this and the default values soon. In the mean time you can always install a plugin like this one:

https://github.com/benface/tailwindcss-transitions

Or simply write the classes yourself:

https://tailwindcss.com/docs/adding-new-utilities/

[adamwathan]

Implemented in v1.2.0.