devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
107 lines (106 loc) • 3.09 kB
JavaScript
/**
* DevExtreme (esm/__internal/ui/drawer/drawer.animation.js)
* Version: 25.2.5
* Build date: Fri Feb 20 2026
*
* Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
import {
fx
} from "../../../common/core/animation";
import {
camelize
} from "../../../core/utils/inflector";
export const animation = {
getMoveToConfig(direction, position) {
switch (direction) {
case "right":
return {
transform: `translate(${position}px, 0px)`
};
case "left":
return {
left: position
};
case "top":
case "bottom":
return {
top: position
};
default:
return
}
},
moveTo(config) {
const {
$element: $element,
position: position,
direction: direction = "left",
duration: duration,
complete: complete
} = config;
const toConfig = this.getMoveToConfig(direction, position);
const animationType = "right" === direction ? "custom" : "slide";
fx.animate($element.get(0), {
type: animationType,
to: toConfig,
duration: duration,
complete: complete
})
},
margin(config) {
const {
$element: $element,
margin: margin,
direction: direction = "left",
duration: duration,
complete: complete
} = config;
const marginName = `margin${camelize(direction,true)}`;
const toConfig = {
[marginName]: margin
};
fx.animate($element.get(0), {
to: toConfig,
duration: duration,
complete: complete
})
},
fade($element, config, duration, completeAction) {
fx.animate($element.get(0), {
type: "fade",
to: config.to,
from: config.from,
duration: duration,
complete: completeAction
})
},
size(config) {
const {
$element: $element,
size: size,
direction: direction = "left",
marginTop: marginTop = 0,
duration: duration,
complete: complete
} = config;
const toConfig = {};
if ("right" === direction || "left" === direction) {
toConfig.width = size
} else {
toConfig.height = size
}
if ("bottom" === direction) {
toConfig.marginTop = marginTop
}
fx.animate($element.get(0), {
to: toConfig,
duration: duration,
complete: complete
})
},
complete($element) {
fx.stop($element.get(0), true)
}
};