107 lines
No EOL
1.9 KiB
TypeScript
107 lines
No EOL
1.9 KiB
TypeScript
import { ref, Ref } from "vue";
|
|
import anime from "animejs";
|
|
|
|
|
|
export function animateTextInput () {
|
|
|
|
const side = ref("right");
|
|
|
|
function show () {
|
|
const t1 = (side.value === "right") ? 50 : -70;
|
|
const t2 = (side.value === "right") ? 110 : -130;
|
|
|
|
anime({
|
|
targets: '#textInput',
|
|
opacity: [0, 1],
|
|
translateX: [t1, t2],
|
|
scale: [0.3, 1],
|
|
duration: 500,
|
|
easing: 'easeOutExpo',
|
|
})
|
|
|
|
}
|
|
|
|
function hide () {
|
|
const t = (side.value === "right") ? 50 : -80;
|
|
|
|
anime({
|
|
targets: '#textInput',
|
|
opacity: [1, 0],
|
|
translateX: t,
|
|
scale: 0.3,
|
|
duration: 500,
|
|
easing: 'easeOutExpo',
|
|
})
|
|
|
|
}
|
|
|
|
function switchSide () {
|
|
const t = (side.value === "right") ? -130 : 110;
|
|
|
|
anime({
|
|
targets: '#textInput',
|
|
translateX: t,
|
|
duration: 500,
|
|
easing: 'easeOutExpo',
|
|
})
|
|
|
|
}
|
|
|
|
return {
|
|
side,
|
|
show,
|
|
hide,
|
|
switchSide
|
|
};
|
|
|
|
}
|
|
|
|
export function animateAudioInput () {
|
|
|
|
function show () {
|
|
anime({
|
|
targets: '#recIcon',
|
|
opacity: [0, 0.75],
|
|
scale: [0.0, 1],
|
|
duration: 250,
|
|
easing: 'linear',
|
|
})
|
|
}
|
|
|
|
function hide () {
|
|
anime({
|
|
targets: '#recIcon',
|
|
opacity: [0.75, 0],
|
|
scale: [1, 0],
|
|
duration: 250,
|
|
easing: 'linear',
|
|
})
|
|
}
|
|
|
|
return {
|
|
show,
|
|
hide
|
|
};
|
|
|
|
}
|
|
|
|
// Given index and length of content, return message child status.
|
|
export function calcChild (index: number, len: number)
|
|
{
|
|
if (len === 1)
|
|
{
|
|
return "none";
|
|
}
|
|
else if (index === 0)
|
|
{
|
|
return "first-child";
|
|
}
|
|
else if (index === len - 1)
|
|
{
|
|
return "last-child";
|
|
}
|
|
else
|
|
{
|
|
return "middle-child";
|
|
}
|
|
} |