60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
import { inject } from "vue";
|
|
import AnimeFunc from "@/types/animejs/index";
|
|
|
|
/**
|
|
* anime js animations used by message view transitions
|
|
*/
|
|
export default function useMessageViewAnims() {
|
|
// imports animejs safely
|
|
let anime: AnimeFunc;
|
|
const animeInject: AnimeFunc | undefined = inject("animejs");
|
|
if (animeInject) anime = animeInject;
|
|
|
|
// update message View bottom bound
|
|
const shiftView = (el: SVGGElement, transform: string) => {
|
|
anime({
|
|
targets: el,
|
|
transform: transform,
|
|
easing: "easeInOutQuad",
|
|
duration: 500,
|
|
});
|
|
}
|
|
|
|
// stacks message from top to bottom
|
|
const stackAnimate = (el: Element, transform: string) => {
|
|
return new Promise((resolve, _reject) => {
|
|
anime({
|
|
targets: el,
|
|
transform: transform,
|
|
easing: "easeInOutQuad",
|
|
duration: 1000,
|
|
complete: function() {
|
|
resolve();
|
|
}
|
|
});
|
|
})
|
|
}
|
|
|
|
// adds new message at the bottom of the list and shifts existing message list
|
|
const shiftAnimate = (el: Element, transform: string, view: SVGGElement, viewTransform: string) => {
|
|
return new Promise((resolve, _reject) => {
|
|
anime({
|
|
targets: el,
|
|
transform: transform,
|
|
easing: "easeInOutQuad",
|
|
duration: 800,
|
|
begin: function() {
|
|
shiftView(view, viewTransform);
|
|
},
|
|
complete: function() {
|
|
resolve();
|
|
}
|
|
});
|
|
})
|
|
}
|
|
|
|
return {
|
|
shiftAnimate,
|
|
stackAnimate,
|
|
};
|
|
}
|