Skip to content

CSS: transition ​

.instui-transition.-transition-fade-entering — Ngā kara ā‑āhua mō te wahanga Transition — .instui-transition me ngā kara ā‑āhua (-transition-fade-entering, -transition-scale-exited, etc.) — ka taea te whakamahi wātea, te here rānei ki tētahi wāhanga.

Source: transition.css

Ngā Whakamahi ​

css
@import "@pantoken/components/utilities.css";

Ngā tauira ​

html
<div class="instui-transition -transition-fade-entering">Ihirangi nekeneke</div>

Ngā Kaitī ​

KaiwhakatikatikaWhakamārama
.-transition-*Momo whakawhitinga / kara ā‑āhua ka hurihia e te wā whakahaere (fade|scale|slide-* + entering|entered|exiting|exited).
.-transition-fade-entered—
.-transition-fade-entering—
.-transition-fade-exited—
.-transition-fade-exiting—
.-transition-scale-entered—
.-transition-scale-entering—
.-transition-scale-exited—
.-transition-scale-exiting—
.-transition-slide-down-entered—
.-transition-slide-down-entering—
.-transition-slide-down-exited—
.-transition-slide-down-exiting—
.-transition-slide-left-entered—
.-transition-slide-left-entering—
.-transition-slide-left-exited—
.-transition-slide-left-exiting—
.-transition-slide-right-entered—
.-transition-slide-right-entering—
.-transition-slide-right-exited—
.-transition-slide-right-exiting—
.-transition-slide-up-entered—
.-transition-slide-up-entering—
.-transition-slide-up-exited—
.-transition-slide-up-exiting—

Ngā taonga ritenga ​

RawaMomoTaunoaWhakamārama
--duration<time>300msRoanga o te āni (taunoa 300ms); whakakē kia tere ake, kia pōuri ake rānei ngā ā‑āhua whakawhitinga katoa.
--timing*ease-in-outMahi waerenga o te āni (taunoa ease-in-out).