CSS View TransitionsãšèŠçŽ ãããã³ã°ãæ·±ãæãäžããã¹ã ãŒãºã§èŠèŠçã«é åçãªUIæŽæ°ã®ããã®é·ç§»èŠçŽ ã®é¢é£ä»ããæ¢ããŸãã
CSS View Transitionã®èŠçŽ ãããã³ã°ïŒé·ç§»èŠçŽ ã®é¢é£ä»ãããã¹ã¿ãŒãã
CSS View Transitions APIã¯ãWebã¢ããªã±ãŒã·ã§ã³ã®ç°ãªãç¶æ éã§ã¹ã ãŒãºã§èŠèŠçã«é åçãªé·ç§»ãäœæãã匷åãªæ¹æ³ãæäŸããŸãããã®APIã®éèŠãªåŽé¢ã¯ãèŠçŽ ãããã³ã°ãç¹ã«é·ç§»èŠçŽ ã®é¢é£ä»ããéãããã®ã§ãããã®èšäºã§ã¯ãé åçãªãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãæ§ç¯ããããã«ãé·ç§»èŠçŽ ã®é¢é£ä»ããçè§£ãã广çã«æŽ»çšããããã®å æ¬çãªã¬ã€ããæäŸããŸãã
CSS View Transitionsãšã¯ïŒ
èŠçŽ ãããã³ã°ã«é£ã³èŸŒãåã«ãCSS View Transitionsãäœã§ããããããããããŸãããããããã¯DOMã®å€æŽãã¢ãã¡ãŒã·ã§ã³åããæ¥ãªå€æŽãšæ¯èŒããŠããæµåçã§èªç¶ãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸããŸããAPIã¯å€æŽååŸã®DOMã®ç¶æ ãèªåçã«ãã£ããã£ãããã®å·®åãã¢ãã¡ãŒã·ã§ã³åããŸããããã«ã¯ãèŠçŽ ã®äœçœ®ããµã€ãºãã¹ã¿ã€ã«ãã³ã³ãã³ãã®å€æŽãå«ãŸããŸãã
åºæ¬çãªæ§é ã¯ãJavaScriptã§document.startViewTransition()颿°ã䜿çšããŠé·ç§»ãããªã¬ãŒããããšã§ãããã®é¢æ°ã¯ãDOMã®æŽæ°ãå®è¡ããã³ãŒã«ããã¯ãåãåããŸãããã®åŸããã©ãŠã¶ãæ§ç¶æ
ãšæ°ç¶æ
ã®éã®ã¢ãã¡ãŒã·ã§ã³ãåŠçããŸãã
äŸïŒ
document.startViewTransition(() => {
// Update the DOM here
document.body.classList.toggle('dark-mode');
});
èŠçŽ ãããã³ã°ã®éèŠæ§
åºæ¬çãªAPIã¯è¯ãåºç€ãæäŸããŸãããå€ãã®å ŽåãèŠçŽ ãã©ã®ããã«é·ç§»ãããã«ã€ããŠãããå€ãã®å¶åŸ¡ãæ±ããããŸããããã§èŠçŽ ãããã³ã°ã圹ç«ã¡ãŸããèŠçŽ ãããã³ã°ããªãå Žåããã©ãŠã¶ã¯äžè¬çãªã¢ãã¡ãŒã·ã§ã³ã«åºã¥ããŠé·ç§»ãäœæããããšããŸãããããã¯æã«äžå¿«ã§äžèªç¶ã«èŠããããšããããŸãã
èŠçŽ ãããã³ã°ã«ãããæ§ç¶æ ãšæ°ç¶æ ã®ã©ã®èŠçŽ ãäºãã«å¯Ÿå¿ãããããã©ãŠã¶ã«äŒããããšãã§ããŸããèŠçŽ ãæç€ºçã«é¢é£ä»ããããšã§ããªã¹ããã¥ãŒãã詳现ãã¥ãŒãžãšãããã£ãŒã«åçãã¹ã ãŒãºã«ã¢ãã¡ãŒã·ã§ã³ããããªã©ãããæå³ã®ããèŠèŠçã«é åçãªé·ç§»ãäœæã§ããŸãã
é·ç§»èŠçŽ ã®é¢é£ä»ãã®çè§£
é·ç§»èŠçŽ ã®é¢é£ä»ãã¯ãCSSã®view-transition-nameããããã£ã䜿çšããŠå®çŸãããŸãããã®ããããã£ã«ãããèŠçŽ ã«äžæã®èå¥åãå²ãåœãŠãããšãã§ããŸãããã©ãŠã¶ãDOMã®æ§ç¶æ
ãšæ°ç¶æ
ã®äž¡æ¹ã§åãview-transition-nameãæ€åºãããšããããã®èŠçŽ ãé¢é£ä»ããããŠãããšèªèããäžç·ã«ã¢ãã¡ãŒã·ã§ã³åããŸãã
view-transition-nameããããã£
view-transition-nameããããã£ã¯ãã«ã¹ã¿ã èå¥åïŒæååïŒãåãå
¥ããŸããèå¥åãé·ç§»ã®ã¹ã³ãŒãå
ã§äžæã§ããããšãéèŠã§ããè€æ°ã®èŠçŽ ãåãview-transition-nameãå
±æããå Žåããã®åäœã¯æªå®çŸ©ã§ãã
äŸïŒ
.profile-picture {
view-transition-name: profile-image;
}
ãã®äŸã§ã¯ãprofile-pictureã¯ã©ã¹ãæã€ãã¹ãŠã®èŠçŽ ã®view-transition-nameãprofile-imageã«èšå®ãããŸãããã¥ãŒé·ç§»ã®ååŸäž¡æ¹ã®ç¶æ
ã§åãã¯ã©ã¹ãšview-transition-nameãæã€èŠçŽ ãååšããå Žåããã©ãŠã¶ã¯ãããã®éã§ã¹ã ãŒãºãªã¢ãã¡ãŒã·ã§ã³ãäœæããããšããŸãã
åºæ¬çãªå®è£ æé
- é¢é£ä»ããèŠçŽ ãç¹å®ããïŒ ç°ãªãç¶æ éã§ã¹ã ãŒãºãªé·ç§»ãæãããã¹ãèŠçŽ ãæ±ºå®ããŸãããããã¯éåžžã補åç»åããŠãŒã¶ãŒã¢ãã¿ãŒãã«ãŒããªã©ãç°ãªããã¥ãŒéã§åãè«çãšã³ãã£ãã£ã衚ãèŠçŽ ã§ãã
view-transition-nameãå²ãåœãŠãïŒ CSSã䜿çšããŠãç¹å®ãããåèŠçŽ ã«äžæã®view-transition-nameãå²ãåœãŠãŸããèŠçŽ ã®åœ¹å²ãåæ ãã説æçãªååïŒäŸïŒproduct-image-123ãuser-avatar-johnïŒãéžæããŸãã- View Transitionãããªã¬ãŒããïŒ JavaScriptãš
document.startViewTransition()ã䜿çšããŠé·ç§»ãããªã¬ãŒããDOMãæŽæ°ããŸãã
以äžã¯ãããå®å šãªäŸã§ãïŒ
HTMLïŒæ§ç¶æ ïŒïŒ
Product 1
HTMLïŒæ°ç¶æ ïŒïŒ
Product 1 Details
JavaScriptïŒ
function showProductDetails() {
document.startViewTransition(() => {
// Update the DOM to show product details
const productCard = document.querySelector('.product-card');
const productDetail = document.querySelector('.product-detail');
productCard.style.display = 'none'; // Hide the card
productDetail.style.display = 'block'; // Show the detail
});
}
ãã®äŸã§ã¯ãshowProductDetails()ãåŒã³åºããããšããã©ãŠã¶ã¯product-imageãproduct-cardã®äœçœ®ããproduct-detailãã¥ãŒã®äœçœ®ãŸã§ã¹ã ãŒãºã«ã¢ãã¡ãŒã·ã§ã³ãããŸãã
é«åºŠãªãã¯ããã¯ãšèæ ®äºé
åçãªview-transition-nameã®å²ãåœãŠ
å€ãã®å ŽåãããŒã¿ã«åºã¥ããŠview-transition-nameã®å€ãåçã«å²ãåœãŠãå¿
èŠããããŸããããšãã°ã補åã®ãªã¹ãã衚瀺ããŠããå Žåãäžææ§ã確ä¿ããããã«è£œåIDãview-transition-nameã«å«ãããšããã§ãããã
äŸïŒJavaScriptã䜿çšïŒïŒ
const products = [
{ id: 1, name: 'Product A', imageUrl: 'productA.jpg' },
{ id: 2, name: 'Product B', imageUrl: 'productB.jpg' },
];
function renderProducts() {
const productList = document.getElementById('product-list');
productList.innerHTML = products.map(product => {
return `
${product.name}
`;
}).join('');
}
renderProducts();
ãã®äŸã§ã¯ãå補åç»åã®view-transition-nameã¯ã補åã®idã«åºã¥ããŠåçã«çæãããŸãã
è€éãªã¬ã€ã¢ãŠã倿Žãžã®å¯Ÿå¿
æ§ç¶æ
ãšæ°ç¶æ
ã®éã®ã¬ã€ã¢ãŠã倿Žãè€éãªå ŽåããããŸãããã©ãŠã¶ãåžžã«æ£ããã¢ãã¡ãŒã·ã§ã³ãæšæž¬ã§ãããšã¯éããŸããããã®ãããªå Žåã::view-transition-groupç䌌èŠçŽ ãšé¢é£ããããã£ã䜿çšããŠã¢ãã¡ãŒã·ã§ã³ãã«ã¹ã¿ãã€ãºã§ããŸãã
::view-transition-groupç䌌èŠçŽ ã¯ãäžç·ã«ã¢ãã¡ãŒã·ã§ã³åãããèŠçŽ ã®ã°ã«ãŒãã衚ããŸãããã®ç䌌èŠçŽ ã«CSSã¹ã¿ã€ã«ãé©çšããŠãã¢ãã¡ãŒã·ã§ã³ã®å€èгãå¶åŸ¡ã§ããŸãã調æŽããäžè¬çãªããããã£ã¯æ¬¡ã®ãšããã§ãïŒ
animation-durationïŒã¢ãã¡ãŒã·ã§ã³ã®ç¶ç¶æéãèšå®ããŸããanimation-timing-functionïŒã¢ãã¡ãŒã·ã§ã³ã®ã€ãŒãžã³ã°é¢æ°ïŒäŸïŒeaseãlinearãease-in-outïŒãèšå®ããŸããanimation-directionïŒã¢ãã¡ãŒã·ã§ã³ã®æ¹åïŒäŸïŒnormalãreverseãalternateïŒãèšå®ããŸãã
äŸïŒ
::view-transition-group(product-image-1) {
animation-duration: 0.5s;
animation-timing-function: ease-in-out;
}
ãã®ã³ãŒãã¹ããããã¯ãproduct-image-1é·ç§»ã°ã«ãŒãã®ã¢ãã¡ãŒã·ã§ã³ãã«ã¹ã¿ãã€ãºããç¶ç¶æéã0.5ç§ã«èšå®ããease-in-outã€ãŒãžã³ã°é¢æ°ã䜿çšããŸãã
éåææäœã®æ±ã
DOMã®æŽæ°ã«éåææäœïŒäŸïŒAPIããã®ããŒã¿ååŸïŒãå«ãŸããå Žåããã¥ãŒé·ç§»ãå®äºããåã«DOMãå®å
šã«æŽæ°ãããããã«ããå¿
èŠããããŸããPromise.all()ã䜿çšããŠããã¹ãŠã®éåææäœãçµäºããã®ãåŸ
ã£ãŠããdocument.startViewTransition()ãåŒã³åºãããšãã§ããŸãã
äŸïŒ
async function loadProductDetails(productId) {
const product = await fetchProductData(productId); // Assume this fetches data
document.startViewTransition(() => {
// Update the DOM with product details
const productDetail = document.getElementById('product-detail');
productDetail.innerHTML = `
${product.name}
${product.description}
`;
});
}
ãã®åçŽåãããäŸã§ã¯ãfetchProductData颿°ã¯éåææäœã§ãããšä»®å®ããŠããŸãããã®äŸã¯æ©èœããŸãããå€ãã®å Žåãäœæçãªé
å»¶ãæå°éã«æããããã«ãããŒã¿ãäºåã«ãã§ããããŠé·ç§»ãéå§ãã*åã«*æºåããŠããæ¹ãè¯ãã§ããããå
ç¢ãªã¢ãããŒãã§ã¯ããããã¹ãæç€ºçã«äœ¿çšããŸãïŒ
async function loadProductDetails(productId) {
// Initiate the data fetch immediately
const productPromise = fetchProductData(productId);
document.startViewTransition(async () => {
// Wait for the promise to resolve *inside* the transition callback
const product = await productPromise;
// Update the DOM with product details
const productDetail = document.getElementById('product-detail');
productDetail.innerHTML = `
${product.name}
${product.description}
`;
});
}
å šäœçãªèæ ®äºé ãšãã¹ããã©ã¯ãã£ã¹
CSS View Transitionsãå®è£ ããéã«ã¯ããããã®å šäœçãªãã¹ããã©ã¯ãã£ã¹ãèæ ®ããŠãã ããïŒ
- ããã©ãŒãã³ã¹ïŒ ç¹ã«äœã¹ããã¯ã®ããã€ã¹ã垯åå¹ ãéããããããã¯ãŒã¯ã§ã¯ãããã©ãŒãã³ã¹ã«æªåœ±é¿ãäžããå¯èœæ§ã®ããé床ã«è€éãªã¢ãã¡ãŒã·ã§ã³ã¯é¿ããŠãã ãããããŸããŸãªããã€ã¹ããããã¯ãŒã¯æ¡ä»¶ã§åŸ¹åºçã«ãã¹ãããŠãã ããã
- ã¢ã¯ã»ã·ããªãã£ïŒ é·ç§»ãååºé害ãæã€ãŠãŒã¶ãŒã«ãšã£ãŠä¹ãç©é
ãããã®ä»ã®ã¢ã¯ã»ã·ããªãã£åé¡ãåŒãèµ·ãããªãããã«ããŠãã ãããã¢ãã¡ãŒã·ã§ã³ãç¡å¹ã«ãããæžãããããããªãã·ã§ã³ãæäŸããŸãã
prefers-reduced-motionã¡ãã£ã¢ã¯ãšãªã®äœ¿çšãæ€èšããŠãã ããã - ããŒã«ã©ã€ãŒãŒã·ã§ã³ïŒ é·ç§»ãããŒã«ã©ã€ãºãããã³ã³ãã³ãã«ã©ã®ããã«åœ±é¿ãããã«æ³šæããŠãã ãããç°ãªãèšèªã§ã®ããã¹ãã®æ¡å€§ãŸãã¯çž®å°ã¯ãã¬ã€ã¢ãŠããé·ç§»ã®æ»ãããã«åœ±é¿ãäžããå¯èœæ§ããããŸããç°ãªãèšèªãæåã»ããã§ãã¹ãããŠãã ããã
- RTLïŒå³ããå·ŠãžïŒã¬ã€ã¢ãŠãïŒ ã¢ããªã±ãŒã·ã§ã³ãRTLèšèªïŒäŸïŒã¢ã©ãã¢èªãããã©ã€èªïŒããµããŒãããŠããå Žåãé·ç§»ãæ£ãããã©ãŒãªã³ã°ãããããã«ããŠãã ãããäžéšã®ã¢ãã¡ãŒã·ã§ã³ã¯ãèŠèŠçãªäžè²«æ§ãä¿ã€ããã«èª¿æŽãå¿ èŠãªå ŽåããããŸãã
- ã³ã³ãã³ãã®ãªãããŒïŒ å€§å¹ ãªã³ã³ãã³ãã®ãªãããŒãåŒãèµ·ããé·ç§»ã¯ããŠãŒã¶ãŒãæ··ä¹±ãããå¯èœæ§ããããŸããé·ç§»äžã®ã¬ã€ã¢ãŠãã·ãããæå°éã«æããããã«ããŠãã ããã
- ããã°ã¬ãã·ããšã³ãã³ã¹ã¡ã³ãïŒ ãã¥ãŒé·ç§»ãããã°ã¬ãã·ããšã³ãã³ã¹ã¡ã³ããšããŠäœ¿çšããŠãã ãããã¢ããªã±ãŒã·ã§ã³ããã¥ãŒé·ç§»ãªãã§ãïŒäŸïŒAPIããµããŒãããŠããªããã©ãŠã¶ã§ïŒæ£ããæ©èœããããšã確èªããŠãã ããã
- é床ã®äœ¿çšãé¿ããïŒ ã¹ã ãŒãºãªé·ç§»ã¯ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããŸããã䜿ãããã¯æ³šææ£æŒ«ã«ãªãå¯èœæ§ããããŸããé·ç§»ã¯æ§ããã«ããã€æå³çã«äœ¿çšããŠãã ããã
ã¯ãã¹ãã©ãŠã¶äºææ§ãšãã©ãŒã«ããã¯
æ¯èŒçæ°ããAPIã§ãããããCSS View Transitionsã¯ãã¹ãŠã®ãã©ãŠã¶ã§å®å šã«ãµããŒããããŠããããã§ã¯ãããŸãããç°ãªããã©ãŠã¶éã§äžè²«ãããšã¯ã¹ããªãšã³ã¹ã確ä¿ããããã«ããã©ãŒã«ããã¯ãå®è£ ããããšãäžå¯æ¬ ã§ããJavaScriptã䜿çšããŠãã©ãŠã¶ã®ãµããŒãã確èªã§ããŸãïŒ
if (document.startViewTransition) {
// Use View Transitions API
} else {
// Implement a fallback (e.g., simple fade-in/fade-out animation)
}
ãã©ãŒã«ããã¯ãå®è£ ããéã«ã¯ãCSSãã©ã³ãžã·ã§ã³ãã¢ãã¡ãŒã·ã§ã³ã䜿çšããŠåºæ¬çãªã¬ãã«ã®èŠèŠçãã£ãŒãããã¯ãæäŸããããšãæ€èšããŠãã ããã
ãã©ãŒã«ããã¯ã®äŸïŒCSS TransitionsïŒ
.fade-in {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.fade-in.active {
opacity: 1;
}
JavaScriptã§ã¯ãæ°ããã³ã³ãã³ãã«fade-inã¯ã©ã¹ã远å ããå°ãé
ããŠactiveã¯ã©ã¹ã远å ããŸããå€ãã³ã³ãã³ããé衚瀺ã«ããåã«ãfade-inã¯ã©ã¹ãåé€ããŸãã
ããããèœãšã穎ãšãã©ãã«ã·ã¥ãŒãã£ã³ã°
view-transition-nameã®æ¬ èœïŒview-transition-nameãæ§èŠçŽ ãšæ°èŠçŽ ã®äž¡æ¹ã«æ£ããèšå®ãããŠããããšã確èªããŠãã ãããã¿ã€ããã¹ãå確èªããCSSãæ£ããé©çšãããŠããããšã確èªããŠãã ããã- ç«¶åããã¢ãã¡ãŒã·ã§ã³ïŒ åãèŠçŽ ã«ä»ã®CSSã¢ãã¡ãŒã·ã§ã³ããã©ã³ãžã·ã§ã³ãé©çšãããŠããå Žåããããããã¥ãŒé·ç§»ãšå¹²æžããå¯èœæ§ããããŸãããã¥ãŒé·ç§»äžã«ãããã®ã¢ãã¡ãŒã·ã§ã³ãç¡å¹ã«ããã調æŽããŠã¿ãŠãã ããã
- äžæ£ç¢ºãªDOMæŽæ°ïŒ DOMã
document.startViewTransition()ã³ãŒã«ããã¯å ã§æ£ããæŽæ°ãããŠããããšã確èªããŠãã ãããäžæ£ç¢ºãªæŽæ°ã¯ãäºæããªãã¢ãã¡ãŒã·ã§ã³åäœã«ã€ãªããå¯èœæ§ããããŸãã - ããã©ãŒãã³ã¹ã®åé¡ïŒ è€éãªã¢ãã¡ãŒã·ã§ã³ã倧ããªDOMã®å€æŽã¯ãããã©ãŒãã³ã¹ã®åé¡ãåŒãèµ·ããå¯èœæ§ããããŸãããã©ãŠã¶ã®éçºè ããŒã«ã䜿çšããŠããã©ãŒãã³ã¹ã®ããã«ããã¯ãç¹å®ããã³ãŒããæé©åããŠãã ããã
- äžæã®åå空éïŒ é·ç§»åãäžæã§ããããšã確èªããŠãã ãããã¢ããªã±ãŒã·ã§ã³å ã®ç°ãªãé·ç§»ã³ã³ããã¹ãã§ååãäžé©åã«åå©çšããããšãç«¶åãçºçããå¯èœæ§ããããŸãã
å®äžçã®äŸ
以äžã¯ãCSS View TransitionsãšèŠçŽ ãããã³ã°ãå®äžçã®ã¢ããªã±ãŒã·ã§ã³ã§ã©ã®ããã«äœ¿çšã§ãããã®äŸã§ãïŒ
- Eã³ããŒã¹ïŒ 補åäžèЧããŒãžãã補å詳现ããŒãžãžè£œåç»åãã¹ã ãŒãºã«é·ç§»ãããŸãã
- ãœãŒã·ã£ã«ã¡ãã£ã¢ïŒ å人ãªã¹ããããŠãŒã¶ãŒãããã£ãŒã«ããŒãžãžãŠãŒã¶ãŒã¢ãã¿ãŒãã¢ãã¡ãŒã·ã§ã³ãããŸãã
- ããã·ã¥ããŒãïŒ ç°ãªãããã·ã¥ããŒããã¥ãŒãåãæ¿ããéã«ããã£ãŒãèŠçŽ ãããŒã¿ããžã¥ã¢ã©ã€ãŒãŒã·ã§ã³ãé·ç§»ãããŸãã
- ããã²ãŒã·ã§ã³ïŒ ã·ã³ã°ã«ããŒãžã¢ããªã±ãŒã·ã§ã³ïŒSPAïŒã®ç°ãªãã»ã¯ã·ã§ã³éã§ã¹ã ãŒãºãªé·ç§»ãäœæããŸãã
- ç»åã®ã£ã©ãªãŒïŒ ç»åã®ã£ã©ãªãŒã§ãµã ãã€ã«ãããã«ã¹ã¯ãªãŒã³ç»åãžã¢ãã¡ãŒã·ã§ã³ãããŸãã
- ãããã€ã³ã¿ãŒãã§ãŒã¹ïŒ ãããã³ã°ã¢ããªã±ãŒã·ã§ã³ã§ãããã¿ã€ã«ããºãŒã ãŸãã¯ãã³ããéã«ã¹ã ãŒãºãªé·ç§»ãå®çŸããŸãïŒãã ããå®è£ ã¯ããè€éã«ãªãå¯èœæ§ããããŸãïŒã
çµè«
CSS View Transitionsã¯ãWebã¢ããªã±ãŒã·ã§ã³ã®ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžããã匷åãªæ¹æ³ãæäŸããŸããé·ç§»èŠçŽ ã®é¢é£ä»ããçè§£ã广çã«æŽ»çšããããšã§ãUIã®ç°ãªãç¶æ éã§ã¹ã ãŒãºã§èŠèŠçã«é åçãªé·ç§»ãäœæã§ããŸãããã¥ãŒé·ç§»ãå®è£ ããéã«ã¯ãããã©ãŒãã³ã¹ãã¢ã¯ã»ã·ããªãã£ãã¯ãã¹ãã©ãŠã¶äºææ§ãèæ ®ããããšãå¿ããªãã§ãã ãããAPIãæçããã«ã€ããŠãã¢ãã³ã§é åçãªWebãšã¯ã¹ããªãšã³ã¹ãæ§ç¯ããããã®ãŸããŸãéèŠãªããŒã«ã«ãªãã§ãããã
æäŸãããäŸã詊ããŠã¿ãŠãèªèº«ã®ãããžã§ã¯ãã§CSS View Transitionsã®å¯èœæ§ãæ¢æ±ããŠãã ãããæ éãªèšç»ãšå®è£ ã«ããããŠãŒã¶ãŒãåã°ãããããæŽç·Žããããããã§ãã·ã§ãã«ãªãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãäœæã§ããŸãã