kingdot/src/styles/common/motion/mixins.styl

A UI Components Library For Vue

// Animation
$-ease-out          := cubic-bezier(0.215, 0.61, 0.355, 1)
$-ease-in           := cubic-bezier(0.55, 0.055, 0.675, 0.19)
$-ease-in-out       := cubic-bezier(0.25, 0.1, 0.25, 0.1)
$-ease-out-back     := cubic-bezier(0.12, 0.4, 0.29, 1.46)
$-ease-in-back      := cubic-bezier(0.71, -0.46, 0.88, 0.6);
$-ease-in-out-back  := cubic-bezier(0.71, -0.46, 0.29, 1.46)
$-ease-out-circ     := cubic-bezier(0.08, 0.82, 0.17, 1)
$-ease-in-circ      := cubic-bezier(0.6, 0.04, 0.98, 0.34)
$-ease-in-out-circ  := cubic-bezier(0.78, 0.14, 0.15, 0.86)
$-ease-out-quint    := cubic-bezier(0.23, 1, 0.32, 1)
$-ease-in-quint     := cubic-bezier(0.755, 0.05, 0.855, 0.06)
$-ease-in-out-quint := cubic-bezier(0.86, 0, 0.07, 1)

$-animation-duration-slow := .3s;
$-animation-duration-base := .2s;
$-animation-duration-fast := .1s;

motion-common($duration = $-animation-duration-base)
    animation-duration  $duration
    animation-fill-mode both

motion-common-leave($duration = $-animation-duration-base)
    animation-duration  $duration
    animation-fill-mode both

make-motion($className, $keyframeName, $duration = $-animation-duration-base)
    .{$className}-enter,
    .{$className}-appear
        motion-common($duration)
        animation-play-state    paused
    .{$className}-leave
        motion-common-leave($duration)
        animation-play-state    paused
    .{$className}-enter.{$className}-enter-active,
    .{$className}-appear.{$className}-appear-active
        animation-name          s('%sIn', $keyframeName)
        animation-play-state    running
    .{$className}-leave.{$className}-leave-active
        animation-name          s('%sOut', $keyframeName)
        animation-play-state    running
        pointer-events          none