:has() 선택자와 뷰 전환 API를 활용해 그리드 요소를 동적으로 추가하거나 제거할 때 자연스러운 모핑(morph) 애니메이션 효과를 구현합니다. 그리드 안의 박스 개수 변화에 따라 레이아웃이 유연하게 재배치되는 기능이 핵심이에요.
모든 탭과 관련된 콘텐츠를 쉬운 애니메이션으로 보여줌으로써 현재 웹 사이트 또는 앱의 어느 부분에 있는지,
다른 섹션으로 이동하는 방법을 쉽게 이해할 수 있습니다.
@import "https://unpkg.com/open-props" layer(design.system);
@import "https://unpkg.com/open-props/normalize.min.css" layer(demo.support);
@import "https://unpkg.com/open-props/buttons.min.css" layer(demo.support);
@layer demo {
.container {
/* VERY IMPORTANT this is "size" and not "inline-size" */
/* it unlocks container aspect ratio queries */
container: perfect-bento / size;
}
.always-great-grid {
/* these are all the quantity queries */
/* how the grid knows the # of boxes */
/* some target the grid itself */
/* some target the :first-child */
&:has(> :last-child:nth-child(3)) > :first-child {
grid-column: span 2;
}
&:has(> :last-child:nth-child(4)) {
grid-template-columns: repeat(2, 1fr);
}
&:has(> :last-child:nth-child(5)) > :first-child {
grid-column: span 2;
}
&:has(> :last-child:nth-child(6)) {
grid-template-columns: repeat(2, 1fr);
}
&:has(> :last-child:nth-child(7)) > :first-child {
grid-column: span 2;
grid-row: span 2;
}
&:has(> :last-child:nth-child(8)) {
grid-template-columns: repeat(2, 1fr);
}
&:has(> :last-child:nth-child(9)) {
grid-template-columns: repeat(3, 1fr);
}
&:has(> :last-child:nth-child(10)) {
grid-template-columns: repeat(2, 1fr);
}
&:has(> :last-child:nth-child(11)) > :first-child {
grid-column: span 2;
grid-row: span 2;
}
&:has(> :last-child:nth-child(12)) {
grid-template-columns: repeat(4, 1fr);
}
/* here's where the layout is adapted if landscape */
@container perfect-bento (orientation: landscape) {
grid-auto-flow: column;
grid-auto-columns: 1fr;
&:has(> :last-child:nth-child(3)) {
grid-template-columns: repeat(4, 1fr);
}
&:has(> :last-child:nth-child(5)) > :first-child {
grid-column: initial;
grid-row: span 2;
}
&:has(> :last-child:nth-child(6)),
&:has(> :last-child:nth-child(8)),
&:has(> :last-child:nth-child(10)),
&:has(> :last-child:nth-child(12)) {
grid-template-rows: repeat(2, 1fr);
}
&:has(> :last-child:nth-child(9)) > :first-child {
grid-column: span 2;
grid-row: span 2;
}
}
}
}
@layer demo.transitions {
.always-great-grid {
view-transition-group: contain;
}
.box {
view-transition-name: match-element;
}
/* this makes the view transition (VT) pseudo elements not steal clicks */
::view-transition {
pointer-events: none;
}
/* removes view transition on the page */
/* helps isolate the morph effect to the grid */
:root {
view-transition-name: none;
}
/* make all the VT animations springy! */
::view-transition-group(*) {
animation-timing-function: var(--ease-squish-1);
animation-timing-function: var(--ease-spring-2);
animation-duration: .75s;
}
/* this makes the box shape size morphs better */
::view-transition-old(*),
::view-transition-new(*) {
height: 100%;
width: 100%;
}
@media (prefers-reduced-motion: no-preference) {
/* custom animation for new boxes coming in */
/* uses Open Props animation and easing props */
/* https://open-props.style/#animations */
::view-transition-new(*):only-child {
animation:
var(--animation-slide-in-up) forwards,
var(--animation-fade-in) forwards;
animation-timing-function: var(--ease-squish-1);
animation-timing-function: var(--ease-spring-2);
}
/* custom animation for old boxes going out */
::view-transition-old(*):only-child {
animation:
var(--animation-slide-out-down) forwards,
var(--animation-fade-out) forwards;
}
}
}
@layer demo.support {
body {
display: grid;
place-content: center;
padding: var(--size-5);
gap: var(--size-5);
}
footer {
display: flex;
place-content: center;
gap: var(--size-2);
}
.always-great-grid {
display: grid;
gap: var(--size-3);
padding: var(--size-3);
}
.box {
background: var(--surface-4);
border-radius: var(--radius-3);
}
.container {
overflow: hidden;
resize: both;
display: grid;
block-size: min(var(--size-content-2), 50vw);
inline-size: min(var(--size-content-2), 50vw);
border: 1px solid var(--surface-3);
}
}
