kingdot
Version:
A UI Components Library For Vue
104 lines (103 loc) • 2.5 kB
text/stylus
zoom-motion($className, $keyframeName, $duration = $-animation-duration-base)
make-motion($className, $keyframeName, $duration)
.{$className}-enter, .{$className}-appear
transform scale(0)
animation-timing-function $-ease-out-circ
.{$className}-leave
animation-timing-function $-ease-in-out-circ
zoom-motion(zoom, kdZoom)
zoom-motion(zoom-big, kdZoomBig)
zoom-motion(zoom-big-fast, kdZoomBig, $-animation-duration-fast)
zoom-motion(zoom-up, kdZoomUp)
zoom-motion(zoom-down, kdZoomDown)
zoom-motion(zoom-left, kdZoomLeft)
zoom-motion(zoom-right, kdZoomRight)
@keyframes kdZoomIn
0%
opacity 0
transform scale(0.2)
100%
opacity 1
transform scale(1)
@keyframes kdZoomOut
0%
transform scale(1)
100%
opacity 0
transform scale(0.2)
@keyframes kdZoomBigIn
0%
opacity 0
transform scale(0.8)
100%
transform scale(1)
@keyframes kdZoomBigOut
0%
transform scale(1)
100%
opacity 0
transform scale(0.8)
@keyframes kdZoomUpIn
0%
opacity 0
transform scale(0.8)
transform-origin 50% 0%
100%
transform scale(1)
transform-origin 50% 0%
@keyframes kdZoomUpOut
0%
transform scale(1)
transform-origin 50% 0%
100%
opacity 0
transform scale(0.8)
transform-origin 50% 0%
@keyframes kdZoomLeftIn
0%
opacity 0
transform scale(0.8)
transform-origin 0% 50%
100%
transform scale(1)
transform-origin 0% 50%
@keyframes kdZoomLeftOut
0%
transform scale(1)
transform-origin 0% 50%
100%
opacity 0
transform scale(0.8)
transform-origin 0% 50%
@keyframes kdZoomRightIn
0%
opacity 0
transform scale(0.8)
transform-origin 100% 50%
100%
transform scale(1)
transform-origin 100% 50%
@keyframes kdZoomRightOut
0%
transform scale(1)
transform-origin 100% 50%
100%
opacity 0
transform scale(0.8)
transform-origin 100% 50%
@keyframes kdZoomDownIn
0%
opacity 0
transform scale(0.8)
transform-origin 50% 100%
100%
transform scale(1)
transform-origin 50% 100%
@keyframes kdZoomDownOut
0%
transform scale(1)
transform-origin 50% 100%
100%
opacity 0
transform scale(0.8)
transform-origin 50% 100%