The bare minimum setup for enabling your site to use native view transitions in HTML and CSS:

<meta name="view-transition" content="same-origin" />

@view-transition {
  navigation: auto;
}

Ref URL: https://www.amitmerchant.com/bare-minimum-view-transitions/

https://developer.chrome.com/docs/css-ui/animate-to-height-auto#animate_the_details_element

@supports (interpolate-size: allow-keywords) {
    :root {
        interpolate-size: allow-keywords;
    }
    
    details {
        transition: height 0.5s ease;
        height: 2.5rem;
        
        &[open] {
            height: auto;
            overflow: clip; /* Clip off contents while animating */
        }
    }
}

You can automatically transform input values to number and date with the valueAsNumber and valueAsDate function on inputs objects.

// This will always return NaN since valueAsNumber is not available on text inputs
<input type="text" onChange={e => console.log(e.target.valueAsNumber)} />

// Return the value as an integer or a float
// depending on the input's step attribute
<input type="number" onChange={e => console.log(e.target.valueAsNumber)} />

// Return the date as a UNIX timestamp, i.e. new Date().getTime()
<input type="date" onChange={e => console.log(e.target.valueAsNumber)} />

// Return the date as a JS Date object
<input type="date" onChange={e => console.log(e.target.valueAsDate)} />

Ref URL: https://devlog.willcodefor.beer/pages/use-valueasnumber-and-valueasdate-on-inputs/