Universal classes and helpers to manage transitions and animations.
All animations and transitions inherit (by default) from a core set of timings. There are two speeds, and several timing curves:
$transition: ( fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1), linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1), fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1), ease-in-out: cubic-bezier(0.4, 0, 0.6, 1), fast-in-fast-out: cubic-bezier(0.25, 0.8, 0.25, 1), swing: cubic-bezier(0.25, 0.8, 0.5, 1), ); $transition-durations: ( snap: .1s, fast: .165s, brisk: .333s, slow: .5s, sleepy: 1s, ); $primary-transition: 0.165s map-get($transition, swing) !default; $secondary-transition: 0.3s map-get($transition, ease-in-out) !default;
Our animation classes are prefixed with
fx- to denote them as such. They are grouped according to those that need the user's attention, and those that indicate system activity. See the notifications documentation for additional details.
(none, at present)
These classes are written such that they may be consumed by a Vue
<transition>. Currently, there are: