# transition

The markup of every demo on <https://kuiper.oeds.it/transition/>, extracted from that
page. It is generated, so it cannot disagree with what the page renders.

Load the framework from the origin and read <https://kuiper.oeds.it/docs/KUIPER.md> first:
a Kuiper class carries no prefix and a UIkit behavior attribute carries `data-`.

## transition-*

Varies: the `transition-slide-top-*` ladder over 2 rungs, `s` to `m`.

```html
<div class="grid-xs" data-grid>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card background-muted-xlight overflow-hidden transition-toggle"><p class="text-xs text-center">fade</p><button class="transition-fade button button-l button-muted width-1-1" aria-label="fade"></button></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card background-muted-xlight overflow-hidden transition-toggle"><p class="text-xs text-center">scale-up</p><button class="transition-scale-up button button-l button-muted width-1-1" aria-label="scale-up"></button></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card background-muted-xlight overflow-hidden transition-toggle"><p class="text-xs text-center">scale-down</p><button class="transition-scale-down button button-l button-muted width-1-1" aria-label="scale-down"></button></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card background-muted-xlight overflow-hidden transition-toggle"><p class="text-xs text-center">slide-top</p><button class="transition-slide-top button button-l button-muted width-1-1" aria-label="slide-top"></button></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card background-muted-xlight overflow-hidden transition-toggle"><p class="text-xs text-center">slide-bottom</p><button class="transition-slide-bottom button button-l button-muted width-1-1" aria-label="slide-bottom"></button></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card background-muted-xlight overflow-hidden transition-toggle"><p class="text-xs text-center">slide-left</p><button class="transition-slide-left button button-l button-muted width-1-1" aria-label="slide-left"></button></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card background-muted-xlight overflow-hidden transition-toggle"><p class="text-xs text-center">slide-right</p><button class="transition-slide-right button button-l button-muted width-1-1" aria-label="slide-right"></button></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card background-muted-xlight overflow-hidden transition-toggle"><p class="text-xs text-center">slide-top-s</p><button class="transition-slide-top-s button button-l button-muted width-1-1" aria-label="slide-top-s"></button></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card background-muted-xlight overflow-hidden transition-toggle"><p class="text-xs text-center">slide-bottom-s</p><button class="transition-slide-bottom-s button button-l button-muted width-1-1" aria-label="slide-bottom-s"></button></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card background-muted-xlight overflow-hidden transition-toggle"><p class="text-xs text-center">slide-left-s</p><button class="transition-slide-left-s button button-l button-muted width-1-1" aria-label="slide-left-s"></button></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card background-muted-xlight overflow-hidden transition-toggle"><p class="text-xs text-center">slide-right-s</p><button class="transition-slide-right-s button button-l button-muted width-1-1" aria-label="slide-right-s"></button></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card background-muted-xlight overflow-hidden transition-toggle"><p class="text-xs text-center">slide-top-m</p><button class="transition-slide-top-m button button-l button-muted width-1-1" aria-label="slide-top-m"></button></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card background-muted-xlight overflow-hidden transition-toggle"><p class="text-xs text-center">slide-bottom-m</p><button class="transition-slide-bottom-m button button-l button-muted width-1-1" aria-label="slide-bottom-m"></button></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card background-muted-xlight overflow-hidden transition-toggle"><p class="text-xs text-center">slide-left-m</p><button class="transition-slide-left-m button button-l button-muted width-1-1" aria-label="slide-left-m"></button></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card background-muted-xlight overflow-hidden transition-toggle"><p class="text-xs text-center">slide-right-m</p><button class="transition-slide-right-m button button-l button-muted width-1-1" aria-label="slide-right-m"></button></div></div>
</div>
```

## transition-* modifiers

Varies: 4 specimens.

```html
<div class="grid-xs" data-grid>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card background-muted-xlight overflow-hidden transition-toggle"><p class="text-xs text-center">slide-bottom-m</p><button class="transition-slide-bottom-m button button-l button-muted width-1-1" aria-label="slide-bottom-m"></button></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card background-muted-xlight overflow-hidden transition-toggle"><p class="text-xs text-center">+ opaque</p><button class="transition-slide-bottom-m transition-opaque button button-l button-muted width-1-1" aria-label="+ opaque"></button></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card background-muted-xlight overflow-hidden transition-toggle"><p class="text-xs text-center">+ slow</p><button class="transition-slide-bottom-m transition-slow button button-l button-muted width-1-1" aria-label="+ slow"></button></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card background-muted-xlight overflow-hidden transition-toggle"><p class="text-xs text-center">+ disable</p><button class="transition-slide-bottom-m transition-disable button button-l button-muted width-1-1" aria-label="+ disable"></button></div></div>
</div>
```