Transitioning To Auto Peak | CSS-Tips

I do know that is one thing Chris has needed endlessly, so it’s no shock he’s already obtained a implausible write-up only a day after the information broke. In truth, I first discovered about it from his submit and was unable to dredge up any form of announcement. So, I believed I’d jot some notes down as a result of it seems like a big improvement.

The information: transitioning to auto is now a factor! Effectively, it’s going to be a factor. Chrome Canary not too long ago shipped assist for it and that’s the one place you’ll discover it for now. And even then, we simply don’t know if the Chrome Canary implementation will discover its solution to the syntax when the characteristic turns into official.

The issue

Right here’s the scenario. You could have a component. You’ve marked it up, plopped in contents, and utilized a bunch of types to it. Have you learnt how tall it’s? In fact not! Certain, we will ask JavaScript to guage the factor for us, however so far as CSS is anxious, the factor’s computed dimensions are unknown.

That makes it troublesome to, say, animate that factor from peak: 0 to peak: no matter. We have to know what “no matter” is and we will solely do this by setting a set peak on the factor. That method, we’ve got numbers to transition from zero peak to that particular peak.

.panel {
  peak: 0;
  transition: peak 0.25s ease-in;

  &.expanded {
    peak: 300px;
  }
}

However what occurs if that factor adjustments over time? Perhaps the font adjustments, we add padding, extra content material is inserted… something that adjustments the size. We probably must replace that peak: 300px to no matter new mounted peak works finest. For this reason we frequently see JavaScript used to toggle issues that develop and contract in measurement, amongst different workarounds.

I say that is concerning the peak property, however we’re additionally speaking concerning the logical equal, block-size, in addition to width and inline-size. Or any route for that matter!

Transitioning to auto

That’s the objective, proper? We have a tendency to achieve for peak: auto when the peak dimension is unknown. From there, we let JavaScript calculate what that evaluates to and take issues from there.

The present Chrome implementation makes use of CSS calc() to do the heavy lifting. It acknowledges the auto key phrase and, true to its title, calculates that quantity. In different phrases, we will do that as a substitute of the fixed-height strategy:

.panel {
  peak: 0;
  transition: peak 0.25s ease-in;

  &.expanded {
    peak: calc(auto);
  }
}

That’s actually it! In fact, calc() is able to extra advanced expressions however the truth that we will provide it with only a imprecise key phrase about a component’s peak is darn spectacular. It’s what permits us to go from a set worth to the factor’s intrinsic measurement and again.

I needed to give it a attempt. I’m positive there are a ton of use circumstances right here, however I went with a floating button in a calendar part that signifies a sure variety of pending calendar invitations. Click on the button, and a panel expands above the calendar and divulges the invitations. Click on it once more and the panel goes again to the place it got here from. JavaScript is dealing with the clicking interplay, triggering a category change that transitions the peak in CSS.

A video in case you don’t really feel like opening Canary:

That is the related CSS:

.invite-panel {
  peak: 0;
  overflow-y: clip;
  transition: peak 0.25s ease-in;
}

On click on, JavaScript units auto peak on the factor as an inline model to override the CSS:

<div class="invite-panel" model="peak: calc(auto)">

The transition property in CSS lets the browser know that we plan on altering the peak property sooner or later, and to make it easy. And, as with every transition or animation, it’s a good suggestion to account for movement sensitivities by slowing down or eradicating the movement with prefers-reduced-motion.

What about show: none?

This is likely one of the first questions that popped into my head after I learn Chris’s submit and he will get into that as nicely. Transitioning from a component from show: none to its intrinsic measurement is form of like going from peak: 0. It would seem to be a non-displayed factor has zero peak, however it really does have a computed peak of auto except a selected peak is asserted on it.

So, there’s additional work to do if we need to transition from show: none in CSS. I’ll merely plop within the code Chris shared as a result of it properly demonstrates the important thing components:

.factor {
  /* exhausting mode!! */
  show: none;

  transition: peak 0.2s ease-in-out;
  transition-behavior: allow-discrete;

  peak: 0; 
  @starting-style {
    peak: 0;
  }

  &.open {
    peak: calc(auto);
  }
}

• The factor begins with each show: none and peak: 0.
• There’s an .open class that units the factor’s peak to calc(auto).

These are the 2 dots we have to join and we do it by first setting transition-behavior: allow-discrete on the factor. That is new to me, however the spec says that transition-behavior “specifies whether or not transitions might be began or not for discrete properties.” And once we declare allow-discrete, “transitions might be began for discrete properties in addition to interpolable properties.”

Effectively, DevTools confirmed us proper there that peak: auto is a discrete property! Discover the @starting-style declaration, although. For those who’re unfamiliar with it, you’re not alone. The thought is that it lets us set a mode for a transition to “begin” with. And since our factor’s discrete peak is auto, we have to inform the transition to start out at peak: 0 as a substitute:

.factor {
  /* and so forth. */

  @starting-style {
    peak: 0;
  }
}

Now, we will transfer from zero to auto since we’re sorta overriding the discrete peak with @starting-style. Fairly cool we will do this!

Direct Hyperlink →