view tran­si­ti­ons

beim me­di­en­bä­cker kürz­lich ge­se­hen, dass sei­ne über­schrif­ten an­ge­nehm ani­miert sind.

das woll­te ich auch ha­ben, also an­ge­fan­gen im quell­text zu gra­ben. es zeigt sich, das sind nur ein paar zei­len code, um die­sen ef­fekt zu er­zie­len. im css:

@media (prefers-reduced-motion: no-pre­fe­rence){
  @view-tran­si­ti­on { na­vi­ga­ti­on: auto; }
}

                    

da­mit wer­den die view tran­si­ti­ons ak­ti­viert, al­ler­dings nur, wenn der be­nut­zer in sei­nen sys­tem­ein­stel­lun­gen nicht „re­du­zier­te be­we­gung“ ein­ge­stellt hat.

ele­men­te die man ani­mie­ren möch­te müs­sen über die sei­ten hin­weg ein­fach den glei­chen view-tran­si­ti­on-name be­kom­men. in mei­nen kir­by tem­pla­tes und snip­pets habe ich da­für ge­sorgt, dass alle <article> und <img> ele­men­te den glei­chen view-tran­si­ti­on-name be­kom­men.

<article data-template="templates/note.php" class="note id-<?= $page->uuid()->id() 
    ?> category-<?= $page->category() 
    ?> category-x<?= $category 
    ?> h-entry" id="<?= $page->uuid()->id() 
    ?>" style="view-tran­si­ti­on-name: vt-<?= $page->slug() ?>-article">

                    

und das is­ses schon. funk­tio­niert fas­zi­nie­ren­der­wei­se über sei­ten hin­weg, chro­me(ium) und sa­fa­ri kön­nen es, fire­fox noch nicht (über sei­ten hin­weg) .

ins­ge­samt la­den alle sei­ten et­was wei­cher, weil ich meis­tens kei­ne ge­kürz­ten ar­ti­kel an­zei­ge, ist die ani­ma­ti­on, fin­de ich, ziem­lich sub­til. le­dig­lich im ar­chiv, in such­er­geb­nis­sen oder im bil­der-grid auf der rück­sei­te ist es et­was auf­fäl­li­ger.