CSS View Transition APIãšã¯ã©ã¹ããŒã¹ã®ãããŒãžã£ãŒã掻çšããWebã¢ããªã±ãŒã·ã§ã³ã§ã¹ã ãŒãºã§é åçãªãã©ã³ãžã·ã§ã³ãäœæããäžçäžã®ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããæ¹æ³ãåŠã³ãŸãããã
CSS View Transitionã¯ã©ã¹ãããŒãžã£ãŒïŒã¢ãã¡ãŒã·ã§ã³ã¯ã©ã¹ã·ã¹ãã
åžžã«é²åãç¶ããWebéçºã®åéã«ãããŠãã·ãŒã ã¬ã¹ã§é åçãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®åµé ã¯æéèŠèª²é¡ã§ãããããéæããããã®éèŠãªåŽé¢ã®1ã€ã¯ã广çãªã¢ãã¡ãŒã·ã§ã³ãšãã©ã³ãžã·ã§ã³ã§ãã匷åãªæ°æ©èœã§ããCSS View Transition APIã¯ãWebããŒãžã®ç°ãªãç¶æ éã§æ»ãããªãã©ã³ãžã·ã§ã³ãäœæããããã®å ç¢ãªã¡ã«ããºã ãæäŸããŸãããããããããã®ãã©ã³ãžã·ã§ã³ãå¹ççã«ç®¡çããããšã¯å°é£ãªå ŽåããããŸãããã®ããã°æçš¿ã§ã¯ãCSS View Transitionã®äžçãæãäžãããããã®ã¢ãã¡ãŒã·ã§ã³ã®å®è£ ãç°¡çŽ åãåçåããããã«èšèšãããã¯ã©ã¹ããŒã¹ã®ãããŒãžã£ãŒã§ããã¢ãã¡ãŒã·ã§ã³ã¯ã©ã¹ã·ã¹ãã ã玹ä»ããäžçèŠæš¡ã§ã®ããè¯ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãžãšå°ããŸãã
CSS View Transition APIãçè§£ãã
çŸåšãã¢ãã³ãã©ãŠã¶ã§å©çšå¯èœãªCSS View Transition APIã¯ãéçºè ãWebããŒãžã®ç°ãªãç¶æ éã§èŠèŠçã«é åçãªãã©ã³ãžã·ã§ã³ãäœæããããšãå¯èœã«ããŸãããããã®ãã©ã³ãžã·ã§ã³ã¯åçŽãªå€æŽã«éå®ããããè€éãªå€æãã¢ãã¡ãŒã·ã§ã³ããšãã§ã¯ããå«ã¿ãŸãããã®APIã¯ãèŠçŽ ã®ãåããšãåŸãã®ç¶æ ããã£ããã£ãããããã®éã«æ»ãããªãã©ã³ãžã·ã§ã³ãäœæããããšã§æ©èœããŸããããã«ãããéçºè ã¯ãã³ã³ãã³ããããŒãžäžã§å€æŽããããšãã«ãã°ãã°çºçããäžå¿«ãªãžã£ã³ããé¿ããããšãã§ããŸãã
View Transition APIã®æ žãšãªãã®ã¯ãã¢ãã¡ãŒã·ã§ã³ãåŠçããããã«::view-transition-image-pairæ¬äŒŒèŠçŽ ã䜿çšããããšã§ãããã®æ¬äŒŒèŠçŽ ã¯ããã©ã³ãžã·ã§ã³äžã«èŠçŽ ã®ãåããšãåŸãã®ç¶æ
ãã¬ã³ããªã³ã°ããã¡ã«ããºã ãæäŸããŸããéçºè
ã¯ãã®åŸãCSSã䜿çšããŠãæéãã¿ã€ãã³ã°é¢æ°ãtransformããããã£ãªã©ã®ç¹å®ã®ã¢ãã¡ãŒã·ã§ã³ã¹ã¿ã€ã«ãå®çŸ©ã§ããŸãã
View Transition APIã䜿çšããäž»ãªå©ç¹ã«ã¯ä»¥äžãå«ãŸããŸãïŒ
- ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®åäžïŒã¹ã ãŒãºãªãã©ã³ãžã·ã§ã³ã«ãããWebããŒãžãããçŽæçã§äœ¿ãããããªããŸãã
- ããã©ãŒãã³ã¹ã®æ¹åïŒAPIã¯ã¬ã³ããªã³ã°ããã»ã¹ãæé©åããããã¹ã ãŒãºãªã¢ãã¡ãŒã·ã§ã³ãå®çŸã§ããŸãã
- ã¢ãã¡ãŒã·ã§ã³å®è£ ã®ç°¡çŽ åïŒAPIã¯è€éãªã¢ãã¡ãŒã·ã§ã³ã®äœæããã»ã¹ãç°¡çŽ åããè€éãªJavaScriptã³ãŒãã®å¿ èŠæ§ãæžãããŸãã
- ãã€ãã£ããã©ãŠã¶ãµããŒãïŒçµã¿èŸŒã¿ã®ãã©ãŠã¶ãµããŒãã«ãããã³ã¢æ©èœã®ããã«å€éšã©ã€ãã©ãªããã¬ãŒã ã¯ãŒã¯ã«äŸåããå¿ èŠããããŸããã
管çã®èª²é¡ïŒã¢ãã¡ãŒã·ã§ã³ã¯ã©ã¹ã·ã¹ãã ã®å°å ¥
View Transition APIã¯åŒ·åã§ããã倿°ã®ãã©ã³ãžã·ã§ã³ã管çããããšã¯è€éã«ãªãå¯èœæ§ããããŸããç¹ã«åºç¯å²ã®ã¢ãã¡ãŒã·ã§ã³ãããå ŽåãèŠçŽ ã«çŽæ¥CSSã¹ã¿ã€ã«ãé©çšãããšãã³ãŒãã®è¥å€§åãä¿å®ãå°é£ãªã¹ã¿ã€ã«ã·ãŒããããã³æœåšçãªç«¶åã«ã€ãªããå¯èœæ§ããããŸããããã§ã¢ãã¡ãŒã·ã§ã³ã¯ã©ã¹ã·ã¹ãã ãç»å ŽããŸããã¯ã©ã¹ããŒã¹ã®ã·ã¹ãã ã¯ãView Transitionã®ç®¡çãšå®è£ ã®ããã»ã¹ãç°¡çŽ åãåçåããŸãã
ã¢ãã¡ãŒã·ã§ã³ã¯ã©ã¹ã·ã¹ãã ãšã¯ïŒ
ã¢ãã¡ãŒã·ã§ã³ã¯ã©ã¹ã·ã¹ãã ã¯ãã¢ãã¡ãŒã·ã§ã³ã管çããããã®æ§é åãããã¢ãããŒããæäŸããŸããããã¯ãç¹å®ã®ãã¢ãã¡ãŒã·ã§ã³ã¹ã¿ã€ã«ããŸãã¯ã广ãã衚ãäžé£ã®CSSã¯ã©ã¹ãå®çŸ©ããããšãå«ã¿ãŸãããããã®ã¯ã©ã¹ã¯ãç®çã®ãã©ã³ãžã·ã§ã³ãããªã¬ãŒããããã«HTMLèŠçŽ ã«é©çšãããŸãããã®ã¢ãããŒãã«ã¯ããã€ãã®å©ç¹ããããŸãã
- åå©çšæ§ïŒã¯ã©ã¹ã¯ç°ãªãèŠçŽ ãã³ã³ããŒãã³ãéã§åå©çšã§ããã³ãŒãã®éè€ãæžãããŸãã
- ä¿å®æ§ïŒã¢ãã¡ãŒã·ã§ã³ã¹ã¿ã€ã«ãžã®å€æŽã¯1ç®æïŒCSSã¯ã©ã¹å®çŸ©ïŒã§è¡ãããšãã§ãããã®ã¯ã©ã¹ã䜿çšãããã¹ãŠã®èŠçŽ ã«å¹æãåæ ãããŸãã
- å¯èªæ§ïŒã¢ãã¡ãŒã·ã§ã³ããžãã¯ãHTMLæ§é ããåé¢ããããããã³ãŒããããèªã¿ããããçè§£ãããããªããŸãã
- çµç¹åïŒã¯ã©ã¹ããŒã¹ã®ã·ã¹ãã ã¯ãã¢ãã¡ãŒã·ã§ã³ç®¡çã«å¯Ÿããååã«çµç¹åãããæ§é åãããã¢ãããŒããä¿é²ããŸãã
ã¢ãã¡ãŒã·ã§ã³ã¯ã©ã¹ã·ã¹ãã ã®äœæïŒå®è·µã¬ã€ã
ã·ã³ãã«ãªã¢ãã¡ãŒã·ã§ã³ã¯ã©ã¹ã·ã¹ãã ãæ§ç¯ããŠã¿ãŸããããç§ãã¡ã¯ããã«ãŒãããã³ã³ãã³ãã®ãã»ã¯ã·ã§ã³ããªã©ã®ã·ã³ãã«ãªã³ã³ããŒãã³ãã«ãããã¢ãã¡ãŒã·ã§ã³é·ç§»ã«çŠç¹ãåœãŠãŸãããã®äŸã¯ã䜿çšãããŠããéçºãã¬ãŒã ã¯ãŒã¯ïŒReactãAngularãVue.jsããŸãã¯ãã¬ãŒã³ãªJavaScriptïŒã«é¢ä¿ãªããä»»æã®Webã¢ããªã±ãŒã·ã§ã³ã«ç°¡åã«é©å¿ã§ããããã«èšèšãããŠããŸãã
1. HTMLæ§é ïŒäŸïŒïŒ
ã³ã³ããŒãã³ãã®åºæ¬çãªHTMLæ§é ã¯æ¬¡ã®ãšããã§ã:
<div class="card">
<h2>Card Title</h2>
<p>Some content within the card.</p>
</div>
2. CSSïŒã¢ãã¡ãŒã·ã§ã³ã¯ã©ã¹å®çŸ©ïŒïŒ
次ã«ããã©ã³ãžã·ã§ã³ãå¶åŸ¡ããããã®ããã€ãã®CSSã¯ã©ã¹ãå®çŸ©ããŸããããããã§::view-transition-image-pairæ¬äŒŒèŠçŽ ãæŽ»èºããŸããã³ã³ãã³ãã®å¯èŠæ§ããµã€ãºãäœçœ®ãªã©ã®å€æŽãšãã£ãç°ãªããŠãŒã¹ã±ãŒã¹ãæ€èšããŸãããŸãã¯ã·ã³ãã«ãªãã§ãŒãã€ã³/ãã§ãŒãã¢ãŠã广ããå§ããŸããããããã¯ããã¿ã³ãã¯ãªãã¯ããããšãã«ã«ãŒãã衚瀺ããããªã©ãå€ãã®ã°ããŒãã«ãªãŠãŒã¹ã±ãŒã¹ã«é©çšã§ããŸãã
.card {
/* Base styles for the card */
width: 300px;
padding: 20px;
background-color: #f0f0f0;
border-radius: 8px;
transition: opacity 0.3s ease-in-out;
}
.card::view-transition-image-pair {
animation-duration: 0.3s;
animation-timing-function: ease-in-out;
}
.card-fade-in {
opacity: 1;
}
.card-fade-out {
opacity: 0;
}
/* Example of animating scale */
.card-scale-in {
transform: scale(1);
opacity: 1;
}
.card-scale-out {
transform: scale(0.5);
opacity: 0;
}
3. JavaScriptïŒã¯ã©ã¹ç®¡çïŒïŒ
次ã«ããããã®ã¯ã©ã¹ã®é©çšã管çããããã«JavaScriptãå¿ èŠã§ããããã¯ãããããŒãžã£ãŒãã³ã³ããŒãã³ããäœæã§ããéšåã§ãããJavaScriptãã¬ãŒã ã¯ãŒã¯ã䜿çšããŠã䜿çšããªããŠãç°¡åã«å®è¡ã§ããŸãã
function animateCard(cardElement, animationClassIn, animationClassOut, duration = 300) {
cardElement.style.transition = `opacity ${duration}ms ease-in-out, transform ${duration}ms ease-in-out`;
cardElement.classList.add(animationClassOut);
// Trigger a reflow to ensure the transition happens
void cardElement.offsetWidth;
cardElement.classList.remove(animationClassOut);
cardElement.classList.add(animationClassIn);
// Optional: Remove the 'in' animation class after it's finished
setTimeout(() => {
cardElement.classList.remove(animationClassIn);
}, duration);
}
//Example usage (Attach to a button click or a state change)
const card = document.querySelector('.card');
const button = document.querySelector('button'); //Example button
if (button) {
button.addEventListener('click', () => {
animateCard(card, 'card-fade-in', 'card-fade-out');
});
}
// Another example - changing card content and scaling out and in.
function animateCardContentChange(cardElement, content, animationClassIn, animationClassOut, duration = 300) {
animateCard(cardElement, animationClassIn, animationClassOut, duration); // First apply the basic animation
setTimeout(() => {
cardElement.innerHTML = content; // Update content after out animation and before in animation
animateCard(cardElement, animationClassIn, animationClassOut, duration); // Reapply to make sure the animations happen.
}, duration);
}
//Usage Example:
let buttonContent = document.querySelector('#content-button');
if (buttonContent) {
buttonContent.addEventListener('click', () => {
const newContent = "<h2>New Card Title</h2><p>Updated content!</p>";
animateCardContentChange(card, newContent, 'card-scale-in', 'card-scale-out', 500);
});
}
ãã®JavaScriptã³ãŒãã¯ãã¢ãã¡ãŒã·ã§ã³ã¯ã©ã¹ãé©çšããã³åé€ããããã®ã³ã¢æ©èœãæäŸããŸããanimateCard颿°ã¯ãã«ãŒãèŠçŽ ãšããinãããã³ãoutãã¢ãã¡ãŒã·ã§ã³ã®äž¡æ¹ã®CSSã¯ã©ã¹åãããã³ãªãã·ã§ã³ã®æéãåŒæ°ãšããŠåããŸãã
JavaScriptã³ãŒãã®èª¬æïŒ
animateCard(cardElement, animationClassIn, animationClassOut, duration)颿°ïŒ- ã«ãŒãèŠçŽ ãinã¢ãã¡ãŒã·ã§ã³ããã³outã¢ãã¡ãŒã·ã§ã³ã®ã¯ã©ã¹åãããã³ãªãã·ã§ã³ã®æéãåããŸãã
- ãoutãã¢ãã¡ãŒã·ã§ã³ã¯ã©ã¹ïŒäŸïŒ
card-fade-outïŒã远å ããŸãã cardElement.offsetWidthã䜿çšããŠãªãããŒãããªã¬ãŒããŸããããã¯éèŠã§ããããã«ããããã©ãŠã¶ã¯ã¯ã©ã¹ã®è¿œå ãèªèãããoutãã¯ã©ã¹ãåé€ããŠãinãã¯ã©ã¹ã远å ããåã«ã¢ãã¡ãŒã·ã§ã³ãããªã¬ãŒããŸãã- ãoutãã¯ã©ã¹ãåé€ãããinãã¢ãã¡ãŒã·ã§ã³ã¯ã©ã¹ã远å ããŸãã
- ã¢ãã¡ãŒã·ã§ã³å®äºåŸã«inã¯ã©ã¹ãåé€ããããã«
setTimeoutã䜿çšããŸãïŒãªãã·ã§ã³ã§ãããã¯ãªãŒã³ã¢ããã«åœ¹ç«ã¡ãŸãïŒã
- ã€ãã³ããªã¹ããŒïŒäŸïŒïŒ
- ãã¿ã³ã«ã€ãã³ããªã¹ããŒãã¢ã¿ããããŸãïŒãã¿ã³èŠçŽ ãããããšãåæãšããŸãïŒã
- ãã¿ã³ãã¯ãªãã¯ããããšã
animateCard颿°ãåŒã³åºãããã¢ãã¡ãŒã·ã§ã³ãããªã¬ãŒãããŸãã
4. ãã¬ãŒã ã¯ãŒã¯åºæã®èæ ®äºé ïŒ
䜿çšãããã¬ãŒã ã¯ãŒã¯ã«é¢ä¿ãªããã³ã¢ã³ã³ã»ããã¯åãã§ãããã ããçµ±åã¯ãã¬ãŒã ã¯ãŒã¯ã®æ©èœã«åºã¥ããŠãããã«å€æŽãããå ŽåããããŸãã
- ReactïŒReactã§ã¯ãã³ã³ããŒãã³ãã®ç¶æ
ã«åºã¥ããŠã¯ã©ã¹åã管çããç¶æ
ã倿Žããããšãã«ã¢ãã¡ãŒã·ã§ã³ãããªã¬ãŒããããã«
useEffectã䜿çšããŸãã - AngularïŒAngularã¯ã
@Componentãã³ã¬ãŒã¿ã®animationsããããã£ã䜿çšããŠçµã¿èŸŒã¿ã®ã¢ãã¡ãŒã·ã§ã³ãµããŒããæäŸããŸããç¶æ 倿Žã«åºã¥ããŠã¢ãã¡ãŒã·ã§ã³ãå®çŸ©ããã¯ã©ã¹ããŒã¹ã®ã·ã¹ãã ã䜿çšããŠããããããªã¬ãŒã§ããŸãã - Vue.jsïŒVue.jsã§ã¯ã
:classãªã©ã®ãã£ã¬ã¯ãã£ãã䜿çšããŠã¯ã©ã¹åãç°¡åã«ãã€ã³ãã§ããŸããç°ãªãç¶æ éã®ãã©ã³ãžã·ã§ã³ã管çããããã«transitionã³ã³ããŒãã³ãã䜿çšããããšãã§ããŸãã - Vanilla JavaScriptïŒVanilla JavaScriptïŒäžèšã§ç€ºããããã«ïŒã§ã¯ã
classListAPIã䜿çšããŠã¯ã©ã¹æäœãå®å šã«å¶åŸ¡ã§ããŸãã
é«åºŠãªãã¯ããã¯ãšèæ ®äºé
1. è€éãªã¢ãã¡ãŒã·ã§ã³ã·ãŒã±ã³ã¹ïŒ
ããè€éãªã¢ãã¡ãŒã·ã§ã³ã®å Žåãè€æ°ã®CSSãã©ã³ãžã·ã§ã³ãšããŒãã¬ãŒã ãçµã¿åãããããšãã§ããŸããåã¯ã©ã¹ã¯äžé£ã®ã¢ãã¡ãŒã·ã§ã³ãå®çŸ©ã§ããŸããJavaScriptã³ãŒãã¯ããããã®ã¯ã©ã¹ãé©çšããé åºãšã¿ã€ãã³ã°ã管çã§ããŸãã
2. ã«ã¹ã¿ã ã¢ãã¡ãŒã·ã§ã³ããããã£ïŒ
CSS View Transition APIã䜿çšãããšãã»ãšãã©ãã¹ãŠã®CSSããããã£ãã¢ãã¡ãŒã·ã§ã³åã§ããŸããããã䜿çšããŠãåçŽãªãã§ãŒããã¹ã©ã€ãããããã粟巧ãªå€æã广ãŸã§ãå€çš®å€æ§ãªèŠèŠå¹æãäœæã§ããŸãã
3. ããã©ãŒãã³ã¹æé©åïŒ
View Transition APIã¯ããã©ãŒãã³ã¹ãåäžãããããšãã§ããŸãããã¢ãã¡ãŒã·ã§ã³ãæé©åããããšã¯äŸç¶ãšããŠäžå¯æ¬ ã§ããbox-shadowãfilterãªã©ã®è€éãªããããã£ãé床ã«ã¢ãã¡ãŒã·ã§ã³åããããšã¯é¿ããŠãã ããããããã¯ããã©ãŒãã³ã¹ãæ¶è²»ããå¯èœæ§ããããŸãããã©ãŠã¶ã®éçºè ããŒã«ã䜿çšããŠã¢ãã¡ãŒã·ã§ã³ããããã¡ã€ãªã³ã°ããããã©ãŒãã³ã¹ã®ããã«ããã¯ãç¹å®ããŠãã ãããã¬ã³ããªã³ã°ããã©ãŒãã³ã¹ãåäžãããããã«ããŒããŠã§ã¢ã¢ã¯ã»ã©ã¬ãŒã·ã§ã³ã®äœ¿çšãæ€èšããŠãã ããã
4. ã¢ã¯ã»ã·ããªãã£ïŒ
ãã¹ãŠãŠãŒã¶ãŒãã¢ãã¡ãŒã·ã§ã³ã«ã¢ã¯ã»ã¹ã§ããããšã確èªããŠãã ãããã¢ãŒã·ã§ã³ã®å°ãªããšã¯ã¹ããªãšã³ã¹ã奜ããŠãŒã¶ãŒåãã«ãã¢ãã¡ãŒã·ã§ã³ãç¡å¹ã«ãããªãã·ã§ã³ãæäŸããŸããã¢ãã¡ãŒã·ã§ã³åãããèŠçŽ ãšãã®ç®çã説æããããã«ãé©åãªARIA屿§ã䜿çšããŸããã¢ãã¡ãŒã·ã§ã³ããŠãŒã¶ãŒã€ã³ã¿ã©ã¯ã·ã§ã³ã劚ããªãããã«ããŠãã ããã
5. ã¯ãã¹ãã©ãŠã¶äºææ§ïŒ
View Transition APIã¯ãŸããŸããµããŒããããããã«ãªã£ãŠããŠããŸãããAPIããµããŒãããŠããªããã©ãŠã¶åãã«ãã©ãŒã«ããã¯ã¢ãã¡ãŒã·ã§ã³ãæäŸããããã«æ©èœæ€åºã䜿çšããããšã§ãé©åãªã¯ãã¹ãã©ãŠã¶äºææ§ã確ä¿ããŠãã ãããå¿ èŠã§ããã°ããªãã£ã«ã䜿çšããããšãæ€èšã§ããŸãããã»ãšãã©ã®å Žåãããã°ã¬ãã·ããšã³ãã³ã¹ã¡ã³ããé©åãªã¢ãããŒããšãªãããŸãã
6. åœéåãšããŒã«ãªãŒãŒã·ã§ã³ (i18n/l10n)ïŒ
ã°ããŒãã«ãªèŠèŽè åãã«ã¢ãã¡ãŒã·ã§ã³ãèšèšããéã¯ãæåçå·®ç°ãæœåšçãªèšèªã®å£ãèæ ®ããŠãã ãããç¹å®ã®æåã§äžå¿«ãŸãã¯æ··ä¹±ãæãå¯èœæ§ã®ããã¢ãã¡ãŒã·ã§ã³ã¯é¿ããŠãã ããããŠãŒã¶ãŒã®èšèªãèæ¯ã«é¢ä¿ãªããã¢ãã¡ãŒã·ã§ã³ãèŠèŠçã«æç¢ºã§çè§£ããããããšã確èªããŠãã ããã
7. åçã³ã³ãã³ããšããŒã¿æŽæ°ã®åŠçïŒ
å€ãã®Webã¢ããªã±ãŒã·ã§ã³ã§ã¯ãã³ã³ãã³ããšããŒã¿ãåçã«æŽæ°ãããŸããã¢ãã¡ãŒã·ã§ã³ã·ã¹ãã ã¯ãããã®æŽæ°ãé©åã«åŠçã§ããå¿
èŠããããŸããã¢ãã¡ãŒã·ã§ã³ãéè€ããã®ãé²ãããã«ãã¥ãŒã€ã³ã°ã¡ã«ããºã ã䜿çšããããšãæ€èšããã³ã³ãã³ããæŽæ°ããããšãã«ã¢ãã¡ãŒã·ã§ã³ãæ£ããããªã¬ãŒãããããšã確èªããŠãã ãããã³ã³ãã³ãã®å€æŽãã¢ãã¡ãŒã·ã§ã³åããããã«::view-transition-image-pairã䜿çšããŸãã
8. å®è·µäŸïŒæ€çŽ¢çµæã®ã¢ãã¡ãŒã·ã§ã³
æ€çŽ¢çµæãªã¹ããèããŠã¿ãŸãããããŠãŒã¶ãŒãæ€çŽ¢ããã¯ã¹ã«å ¥åãããšãæ€çŽ¢çµæãåçã«æŽæ°ãããŸããã¢ãã¡ãŒã·ã§ã³ã¯ã©ã¹ã·ã¹ãã ãå®è£ ããæ¹æ³ã¯æ¬¡ã®ãšããã§ãã
HTMLïŒç°¡ç¥åïŒïŒ
<ul class="search-results">
<li class="search-result">Result 1</li>
<li class="search-result">Result 2</li>
<li class="search-result">Result 3</li>
</ul>
CSSïŒ
.search-results {
list-style: none;
padding: 0;
}
.search-result {
padding: 10px;
border-bottom: 1px solid #ccc;
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.search-result::view-transition-image-pair {
animation-duration: 0.3s;
animation-timing-function: ease-in-out;
}
.result-fade-in {
opacity: 1;
transform: translateY(0);
}
.result-fade-out {
opacity: 0;
transform: translateY(-10px);
}
JavaScriptïŒç°¡ç¥åïŒïŒ
function animateSearchResult(resultElement, animationClassIn, animationClassOut) {
resultElement.classList.add(animationClassOut);
void resultElement.offsetWidth; // Trigger Reflow
resultElement.classList.remove(animationClassOut);
resultElement.classList.add(animationClassIn);
setTimeout(() => resultElement.classList.remove(animationClassIn), 300);
}
function updateSearchResults(results) {
const resultsContainer = document.querySelector('.search-results');
if (!resultsContainer) return;
// Fade out existing results
const existingResults = Array.from(resultsContainer.children);
existingResults.forEach(result => {
animateSearchResult(result, 'result-fade-out', 'result-fade-in');
});
// Clear existing results and then update them.
setTimeout(() => {
resultsContainer.innerHTML = '';
results.forEach(result => {
const li = document.createElement('li');
li.classList.add('search-result');
li.textContent = result;
resultsContainer.appendChild(li);
animateSearchResult(li, 'result-fade-in', 'result-fade-out');
});
}, 300);
}
// Example usage (Assuming you have a search function)
function performSearch(searchTerm) {
// Simulate getting search results (Replace with your actual API call)
const searchResults = ["Result 1 for " + searchTerm, "Result 2 for " + searchTerm, "Result 3 for " + searchTerm];
updateSearchResults(searchResults);
}
// Example: Attach to a search input (replace with your actual input)
const searchInput = document.querySelector('#searchInput');
if (searchInput) {
searchInput.addEventListener('input', () => {
const searchTerm = searchInput.value;
performSearch(searchTerm);
});
}
ãã®ã¢ãããŒãã¯ãæ¢åã®æ€çŽ¢çµæãšæŽæ°ãããæ€çŽ¢çµæã®éã§ã¹ã ãŒãºãªãã©ã³ãžã·ã§ã³ãäœæããŸããæåã«result-fade-outã¯ã©ã¹ãé©çšãããæ¬¡ã«æ°ãããŸãã¯æŽæ°ãããçµæã«result-fade-inã¯ã©ã¹ãé©çšãããŸãã
çµè«ïŒã°ããŒãã«ãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®åäž
CSS View Transition APIã¯ãã¢ãã¡ãŒã·ã§ã³ã¯ã©ã¹ã·ã¹ãã ãšçµã¿åãããããšã§ãé åçã§ã·ãŒã ã¬ã¹ãªWebã¢ãã¡ãŒã·ã§ã³ãäœæããããã®åŒ·åã§å¹ççãªæ¹æ³ãæäŸããŸããã¯ã©ã¹ããŒã¹ã®ã¢ãããŒããæ¡çšããããšã§ãéçºè ã¯ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããä¿å®æ§ãé«ããã³ãŒãã®åå©çšæ§ã確ä¿ã§ããŸããããã¯ãç¹ã«ã°ããŒãã«ã€ã³ã¿ãŒããããèæ ®ããå Žåãç°ãªãèšèªãæåãããã€ã¹ã§æ©èœããé åçãªãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãäœæããããã«äžå¯æ¬ ã§ããã¢ãã¡ãŒã·ã§ã³ã¯ã©ã¹ã·ã¹ãã ã¯ãã¢ãã¡ãŒã·ã§ã³ç®¡çã«å¯ŸããŠããçµç¹çã§èªã¿ããããä¿å®ããããã¢ãããŒããä¿é²ããæçµçã«ã¯äžçäžã®ãã¹ãŠã®äººã«ãšã£ãŠããè¯ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«è²¢ç®ããŸãã
Webéçºãé²åãç¶ããã«ã€ããŠãã¹ã ãŒãºã§çŽæçãªãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ã®éèŠæ§ã¯ãŸããŸãé«ãŸãã§ããããView Transition APIãæ¡çšããé©åã«èšèšãããã¢ãã¡ãŒã·ã§ã³ã¯ã©ã¹ã·ã¹ãã ãæŽ»çšããããšã§ãéçºè ã¯ãã¹ãŠã®åœå¢ãè¶ããŠåªãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸããWebã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ã§ããŸãããã®ã¢ãããŒãã«ãããå Žæãæè¡çèæ¯ã«é¢ä¿ãªããäžçäžã®ãŠãŒã¶ãŒãWebã¢ããªã±ãŒã·ã§ã³ãç°¡åã«æ¥œããæäœã§ããããã«ãªããŸãããããã®ã¢ãã¡ãŒã·ã§ã³ãæ§ç¯ããéã«ãã¢ã¯ã»ã·ããªãã£ãåœéåãããã©ãŒãã³ã¹ãå¿ããªãããšãéèŠã§ãã
äž»ãªãã€ã³ãïŒ
- CSS View Transition APIã¯ãã¹ã ãŒãºãªã¢ãã¡ãŒã·ã§ã³ãšãã©ã³ãžã·ã§ã³ãäœæãã匷åãªæ¹æ³ãæäŸããŸãã
- ã¢ãã¡ãŒã·ã§ã³ã¯ã©ã¹ã·ã¹ãã ã¯ãåå©çšå¯èœãªCSSã¯ã©ã¹ãéããŠã¢ãã¡ãŒã·ã§ã³ç®¡çãç°¡çŽ åããŸãã
- ãã®ã·ã¹ãã ã¯ãã³ãŒãã®ä¿å®æ§ãå¯èªæ§ãããã³çµç¹åãä¿é²ããŸãã
- ã¢ãã¡ãŒã·ã§ã³ãå®è£ ããéã¯ãã¯ãã¹ãã©ãŠã¶äºææ§ãšã¢ã¯ã»ã·ããªãã£ãèæ ®ããŠãã ããã
- ã°ããŒãã«èŠæš¡ã§ã®ããã©ãŒãã³ã¹ãšã·ãŒã ã¬ã¹ãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®ããã«ã¢ãã¡ãŒã·ã§ã³ãæé©åããŸãã
ãããã®ãã¯ããã¯ãå®è£ ããã¢ã¯ã»ã·ããªãã£ãããã©ãŒãã³ã¹ãã°ããŒãã«ãªèŠç¹ã«çŠç¹ãåœãŠãããšã§ãäžçäžã®ãŠãŒã¶ãŒã«åªãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸããWebã¢ããªã±ãŒã·ã§ã³ãäœæã§ããŸãã