Skip to content

transition.md

Latest commit

 

History

History
102 lines (88 loc) · 5.28 KB

transition.md

File metadata and controls

102 lines (88 loc) · 5.28 KB
title Transition
description Utilities for controlling how an element transitions in and out of states.
keywords
animation
animate
ease
duration

Adding a Transition

Use d-t to add a transition to an element.

<dt-button kind="unstyled" class="d-p-200 d-bar8 d-bgc-moderate h:d-bgc-critical h:d-bs-md h:d-fc-critical d-t ">Hover me</dt-button>

Changing Transition Duration

Use d-td{n} change an element's transition-delay from it's default 50ms length.

<!-- @wrapper -->
<dt-stack direction="row" gap="200">
  <dt-button kind="unstyled" class="d-p-200 d-bar8 d-bgc-moderate h:d-bgc-critical h:d-bs-md h:d-fc-critical d-t d-td0  ">0ms</dt-button>
  <dt-button kind="unstyled" class="d-p-200 d-bar8 d-bgc-moderate h:d-bgc-critical h:d-bs-md h:d-fc-critical d-t        ">50ms</dt-button>
  <dt-button kind="unstyled" class="d-p-200 d-bar8 d-bgc-moderate h:d-bgc-critical h:d-bs-md h:d-fc-critical d-t d-td100">100ms</dt-button>
  <dt-button kind="unstyled" class="d-p-200 d-bar8 d-bgc-moderate h:d-bgc-critical h:d-bs-md h:d-fc-critical d-t d-td150">150ms</dt-button>
  <dt-button kind="unstyled" class="d-p-200 d-bar8 d-bgc-moderate h:d-bgc-critical h:d-bs-md h:d-fc-critical d-t d-td200">200ms</dt-button>
  <dt-button kind="unstyled" class="d-p-200 d-bar8 d-bgc-moderate h:d-bgc-critical h:d-bs-md h:d-fc-critical d-t d-td300">300ms</dt-button>
</dt-stack>

Changing Transition Easing

Use d-ttf-{n} change an element's transition-timing-function (aka easing) from it's default Quad Ease In, Ease Out value.

<!-- @wrapper -->
<dt-stack direction="row" gap="200">
  <dt-button kind="unstyled" class="d-p-200 d-bar8 d-bgc-moderate h:d-bgc-critical h:d-bs-md h:d-fc-critical d-t d-td300 d-ttf          ">Ease</dt-button>
  <dt-button kind="unstyled" class="d-p-200 d-bar8 d-bgc-moderate h:d-bgc-critical h:d-bs-md h:d-fc-critical d-t d-td300                ">Ease In, Ease Out</dt-button>
  <dt-button kind="unstyled" class="d-p-200 d-bar8 d-bgc-moderate h:d-bgc-critical h:d-bs-md h:d-fc-critical d-t d-td300 d-ttf-out      ">Ease Out</dt-button>
  <dt-button kind="unstyled" class="d-p-200 d-bar8 d-bgc-moderate h:d-bgc-critical h:d-bs-md h:d-fc-critical d-t d-td300 d-ttf-out-quint">Ease Out Quint</dt-button>
</dt-stack>

Changing Transition Property

Use d-tp-{n} change an what items within an element are transitioned.

<!-- @wrapper -->
<dt-stack direction="row" gap="200">
  <dt-button kind="unstyled" class="d-p-200 d-bar8 d-bgc-moderate h:d-bgc-critical h:d-bs-md h:d-fc-critical d-t d-td300 d-ttf-out-quint ">All</dt-button>
  <dt-button kind="unstyled" class="d-p-200 d-bar8 d-bgc-moderate h:d-bgc-critical h:d-bs-md h:d-fc-critical d-t d-td300 d-ttf-out-quint h:d-o50 d-tp-o">Opacity</dt-button>
  <dt-button kind="unstyled" class="d-p-200 d-bar8 d-bgc-moderate h:d-bgc-critical h:d-bs-md h:d-fc-critical d-t d-td300 d-ttf-out-quint d-tp-bs">Box shadow</dt-button>
  <dt-button kind="unstyled" class="d-p-200 d-bar8 d-bgc-moderate h:d-bgc-critical h:d-bs-md h:d-fc-critical d-t d-td300 d-ttf-out-quint d-tp-bgc">Background</dt-button>
  <dt-button kind="unstyled" class="d-p-200 d-bar8 d-bgc-moderate h:d-bgc-critical h:d-bs-md h:d-fc-critical d-t d-td300 d-ttf-out-quint d-tp-transform">Transform</dt-button>
  <dt-button kind="unstyled" class="d-p-200 d-bar8 d-bgc-moderate h:d-bgc-critical h:d-bs-md h:d-fc-critical d-t d-td300 d-ttf-out-quint d-tp-colors">Colors</dt-button>
</dt-stack>

Classes

.d-t transition-duration: var(--td25);
transition-property: all;
transition-timing-function: var(--ttf-in-out);
transition-delay: 0s; .d-{{ i }}{{ d }} transition-duration: var(--td{{ d }}) !important; .d-{{ i }}{{ t ? `-${t}` : '' }} transition-timing-function: var(--ttf-{{ t || 'ease' }}) !important; .d-{{ i }}-{{ p }} transition-property: opacity box-shadow background-color background-color, border-color, color, fill, stroke {{ p }} !important; .d-{{ i }}{{ d }} transition-delay: var(--td{{ d }}) !important;