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:

@me­dia (pre­fers-re­du­ced-mo­ti­on: 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 <ar­tic­le> und <img> ele­men­te den glei­chen view-tran­si­ti­on-name be­kom­men.

<ar­tic­le data-tem­p­la­te="tem­pla­tes/note.php" class="note id-<?= $page->uuid()->id() 
    ?> ca­te­go­ry-<?= $page->ca­te­go­ry() 
    ?> ca­te­go­ry-x<?= $ca­te­go­ry 
    ?> h-ent­ry" id="<?= $page->uuid()->id() 
    ?>" style="view-tran­si­ti­on-name: vt-<?= $page->slug() ?>-ar­tic­le">

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.