53 lines
No EOL
1.2 KiB
TypeScript
53 lines
No EOL
1.2 KiB
TypeScript
import AnimeFunc from "@/types/animejs/index";
|
|
import {inject} from "vue";
|
|
import {Ref} from "@/types/vueRef/index";
|
|
export default function useInputAnims() {
|
|
|
|
// imports animejs safely
|
|
let anime: AnimeFunc;
|
|
const animeInject: AnimeFunc | undefined = inject("animejs");
|
|
if (animeInject) anime = animeInject;
|
|
|
|
const animateSend = (el: HTMLElement, elHeight: number, input: Ref<string>) => {
|
|
anime({
|
|
targets: el,
|
|
translateY: -elHeight + 15,
|
|
duration: 200,
|
|
easing: "easeInQuad",
|
|
complete: function() {
|
|
anime({
|
|
targets: el,
|
|
translateY: 50,
|
|
duration: 200,
|
|
easing: "easeOutQuad",
|
|
complete: function () {
|
|
input.value = "";
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
const inputAppear = (el: HTMLElement) => {
|
|
anime({
|
|
targets: el,
|
|
translateY: -10,
|
|
});
|
|
}
|
|
|
|
const verticalShiftInput = (el: HTMLElement, yTrans: number) => {
|
|
anime({
|
|
targets: el,
|
|
translateY: yTrans,
|
|
easing: "easeOutQuad",
|
|
duration: 150,
|
|
});
|
|
}
|
|
|
|
return {
|
|
animateSend,
|
|
verticalShiftInput,
|
|
inputAppear
|
|
}
|
|
|
|
} |