25 lines
967 B
JavaScript
25 lines
967 B
JavaScript
|
import { c } from "../../_utils/cssr/index.mjs";
|
||
|
|
import commonVariables from "../common/_common.mjs";
|
||
|
|
const {
|
||
|
|
cubicBezierEaseInOut
|
||
|
|
} = commonVariables;
|
||
|
|
export function fadeDownTransition({
|
||
|
|
name = 'fade-down',
|
||
|
|
fromOffset = '-4px',
|
||
|
|
enterDuration = '.3s',
|
||
|
|
leaveDuration = '.3s',
|
||
|
|
enterCubicBezier = cubicBezierEaseInOut,
|
||
|
|
leaveCubicBezier = cubicBezierEaseInOut
|
||
|
|
} = {}) {
|
||
|
|
return [c(`&.${name}-transition-enter-from, &.${name}-transition-leave-to`, {
|
||
|
|
opacity: 0,
|
||
|
|
transform: `translateY(${fromOffset})`
|
||
|
|
}), c(`&.${name}-transition-enter-to, &.${name}-transition-leave-from`, {
|
||
|
|
opacity: 1,
|
||
|
|
transform: 'translateY(0)'
|
||
|
|
}), c(`&.${name}-transition-leave-active`, {
|
||
|
|
transition: `opacity ${leaveDuration} ${leaveCubicBezier}, transform ${leaveDuration} ${leaveCubicBezier}`
|
||
|
|
}), c(`&.${name}-transition-enter-active`, {
|
||
|
|
transition: `opacity ${enterDuration} ${enterCubicBezier}, transform ${enterDuration} ${enterCubicBezier}`
|
||
|
|
})];
|
||
|
|
}
|