::view-transition-old

åºçº¿ 2025

æè¿å¯ç¨

::view-transition-old CSS ä¼ªåç´ è¡¨ç¤ºè§å¾è¿æ¸¡çæ§è§å¾ç¶æââå³è¿æ¸¡åæ§è§å¾çéæå±å¹æªå¾ã

::view-transition-old å¨ UA æ ·å¼è¡¨ä¸å·æä»¥ä¸é»è®¤æ ·å¼ï¼

css

@keyframes -ua-view-transition-fade-out {
  to {
    opacity: 0;
  }
}

html::view-transition-old(*) {
  position: absolute;
  inset-block-start: 0;
  inline-size: 100%;
  block-size: auto;

  animation-name: -ua-view-transition-fade-out;
  animation-duration: inherit;
  animation-fill-mode: inherit;
}

è¯æ³

css

::view-transition-old(<pt-name-selector>) {
  /* ... */
}

<pt-name-selector> å¯ä»¥æ¯ä»¥ä¸ä»»ä½å¼ä¹ä¸ï¼

*: ä½¿ä¼ªåç´ éæ©å¨å¹éææè§å¾è¿æ¸¡ç»ã
root: ä½¿ä¼ªåç´ éæ©å¨å¹éç± UA åå»ºçé»è®¤ root è§å¾è¿æ¸¡ç»ï¼è¯¥ç»ç¨äºåå«æ´ä¸ªé¡µé¢çè§å¾è¿æ¸¡ï¼è¿æå³çä»»ä½æªéè¿ view-transition-name å±æ§åéç»ç¹å®è§å¾è¿æ¸¡ç»çåç´ ã
<custom-ident>: ä½¿ä¼ªåç´ éæ©å¨å¹éï¼éè¿ view-transition-name å±æ§å° <custom-ident> åéç»åç´ èåå»ºçï¼ç¹å®è§å¾è½¬æ¢ç»ã

ç¤ºä¾

css

figcaption {
  view-transition-name: figure-caption;
}

@keyframes grow-x {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes shrink-x {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

::view-transition-old(figure-caption),
::view-transition-new(figure-caption) {
  height: auto;
  right: 0;
  left: auto;
  transform-origin: right center;
}

::view-transition-old(figure-caption) {
  animation: 0.25s linear both shrink-x;
}

::view-transition-new(figure-caption) {
  animation: 0.25s 0.25s linear both grow-x;
}