Transitioning To Auto Top | CSS-Tips

I do know that is one thing Chris has needed without end, so it’s no shock he’s already received a implausible write-up only a day after the information broke. In reality, I first realized about it from his publish and was unable to dredge up any type of announcement. So, I assumed I’d jot some notes down as a result of it appears like a big growth.

The information: transitioning to auto is now a factor! Properly, it’s going to be a factor. Chrome Canary not too long ago shipped help 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 approach to the syntax when the function turns into official.

The issue

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

That makes it tough to, say, animate that factor from top: 0 to top: no matter. We have to know what “no matter” is and we will solely try this by setting a hard and fast top on the factor. That method, we have now numbers to transition from zero top to that particular top.

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

  &.expanded {
    top: 300px;
  }
}

However what occurs if that factor modifications over time? Perhaps the font modifications, we add padding, extra content material is inserted… something that modifications the size. We possible must replace that top: 300px to no matter new fastened top works greatest. That is why we frequently see JavaScript used to toggle issues that broaden and contract in measurement, amongst different workarounds.

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

Transitioning to auto

That’s the objective, proper? We have a tendency to achieve for top: 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 {
  top: 0;
  transition: top 0.25s ease-in;

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

That’s actually it! After all, 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 top is darn spectacular. It’s what permits us to go from a hard and fast worth to the factor’s intrinsic measurement and again.

I needed to give it a attempt. I’m certain there are a ton of use circumstances right here, however I went with a floating button in a calendar element 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 press 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 {
  top: 0;
  overflow-y: clip;
  transition: top 0.25s ease-in;
}

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

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

The transition property in CSS lets the browser know that we plan on altering the top property sooner or later, and to make it clean. And, as with all 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 without doubt one of the first questions that popped into my head after I learn Chris’s publish and he will get into that as effectively. Transitioning from a component from show: none to its intrinsic measurement is type of like going from top: 0. It would look like a non-displayed factor has zero top, nevertheless it really does have a computed top or auto except a particular top is said on it.

So, there’s further work to do if we wish 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: top 0.2s ease-in-out;
  transition-behavior: allow-discrete;

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

  &.open {
    top: calc-size(auto);
  }
}

• The factor begins with each show: none and top: 0.
• There’s an .open class that units the factor’s top 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 can be began or not for discrete properties.” And once we declare allow-discrete, “transitions can be began for discrete properties in addition to interpolable properties.”

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

.factor {
  /* and so forth. */

  @starting-style {
    top: 0;
  }
}

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

Direct Hyperlink →