{"id":29,"date":"2025-06-23T16:51:58","date_gmt":"2025-06-23T11:21:58","guid":{"rendered":"https:\/\/infymyblogstst.infosysapps.com\/nextgen-devops\/?p=29"},"modified":"2025-06-23T17:09:26","modified_gmt":"2025-06-23T11:39:26","slug":"transitioning-top-layer-entries-and-the-display-property-in-css","status":"publish","type":"post","link":"https:\/\/infymyblogstst.infosysapps.com\/nextgen-devops\/development\/transitioning-top-layer-entries-and-the-display-property-in-css.html","title":{"rendered":"Transitioning Top-Layer Entries And The Display Property In CSS"},"content":{"rendered":"

Animating from and to\u00a0display: none;<\/code>\u00a0was something we could only achieve with JavaScript to change classes or create other hacks. The reason why we couldn\u2019t do this in CSS is explained in the new\u00a0CSS Transitions Level 2 specification:<\/p>\n

In simple terms, this means that we couldn\u2019t start a transition on an element that is hidden or that has just been created.<\/p>\n

What Does\u00a0transition-behavior: allow-discrete<\/code>\u00a0Do?\u00a0#<\/a><\/h3>\n

allow-discrete<\/code>\u00a0is a bit of a strange name for a CSS property value, right? We are going on about transitioning\u00a0display: none<\/code>, so why isn\u2019t this named\u00a0transition-behavior: allow-display<\/code>\u00a0instead? The reason is that this does a bit more than handling the CSS\u00a0display<\/code>\u00a0property, as there are other \u201cdiscrete\u201d properties in CSS. A simple rule of thumb is that discrete properties do not transition but usually flip right away between two states. Other examples of discrete properties are\u00a0visibility<\/code>\u00a0and\u00a0mix-blend-mode<\/code>. I\u2019ll include an example of these at the end of this article.<\/p>\n

To summarise, setting the\u00a0transition-behavior<\/code>\u00a0property to\u00a0allow-discrete<\/code>\u00a0allows us to tell the browser it can swap the values of a discrete property (e.g.,\u00a0display<\/code>,\u00a0visibility<\/code>, and\u00a0mix-blend-mode<\/code>) at the 50% mark instead of the 0% mark of a transition.<\/p>\n

What Does\u00a0@starting-style<\/code>\u00a0Do?\u00a0#<\/a><\/h3>\n

The\u00a0@starting-style<\/code>\u00a0rule defines the styles of an element right before it is rendered to the page. This is highly needed in combination with\u00a0transition-behavior<\/code>\u00a0and this is why:<\/p>\n

When an item is added to the DOM or is initially set to\u00a0display: none<\/code>, it needs some sort of \u201cstarting style\u201d from which it needs to transition. To take the example further,\u00a0popovers and dialog elements\u00a0are added to a top layer which is a layer that is outside of your document flow, you can kind of look at it as a sibling of the\u00a0<html><\/code>\u00a0element in your page\u2019s structure. Now, when opening this dialog or popover, they get created inside that top layer, so they don\u2019t have any styles to start transitioning from, which is why we set\u00a0@starting-style<\/code>. Don\u2019t worry if all of this sounds a bit confusing. The demos might make it more clearly. The important thing to know is that we can give the browser something to start the animation with since it otherwise has nothing to animate from.<\/p>\n

A Note On Browser Support\u00a0#<\/a><\/h3>\n

At the moment of writing, the\u00a0transition-behavior<\/code>\u00a0is available in Chrome, Edge, Safari, and Firefox. It\u2019s the same for\u00a0@starting-style<\/code>, but Firefox currently does not support animating from\u00a0display: none<\/code>. But remember that everything in this article can be perfectly used as a progressive enhancement.<\/p>\n","protected":false},"excerpt":{"rendered":"

Animating from and to\u00a0display: none;\u00a0was something we could only achieve with JavaScript to change […]<\/p>\n","protected":false},"author":18,"featured_media":30,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[5],"tags":[],"coauthors":[3],"class_list":["post-29","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development"],"acf":[],"_links":{"self":[{"href":"https:\/\/infymyblogstst.infosysapps.com\/nextgen-devops\/wp-json\/wp\/v2\/posts\/29","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/infymyblogstst.infosysapps.com\/nextgen-devops\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/infymyblogstst.infosysapps.com\/nextgen-devops\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/infymyblogstst.infosysapps.com\/nextgen-devops\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/infymyblogstst.infosysapps.com\/nextgen-devops\/wp-json\/wp\/v2\/comments?post=29"}],"version-history":[{"count":1,"href":"https:\/\/infymyblogstst.infosysapps.com\/nextgen-devops\/wp-json\/wp\/v2\/posts\/29\/revisions"}],"predecessor-version":[{"id":31,"href":"https:\/\/infymyblogstst.infosysapps.com\/nextgen-devops\/wp-json\/wp\/v2\/posts\/29\/revisions\/31"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/infymyblogstst.infosysapps.com\/nextgen-devops\/wp-json\/wp\/v2\/media\/30"}],"wp:attachment":[{"href":"https:\/\/infymyblogstst.infosysapps.com\/nextgen-devops\/wp-json\/wp\/v2\/media?parent=29"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/infymyblogstst.infosysapps.com\/nextgen-devops\/wp-json\/wp\/v2\/categories?post=29"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/infymyblogstst.infosysapps.com\/nextgen-devops\/wp-json\/wp\/v2\/tags?post=29"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/infymyblogstst.infosysapps.com\/nextgen-devops\/wp-json\/wp\/v2\/coauthors?post=29"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}