import { trigger, transition, style, animate } from "@angular/animations";

export const showAnimation = trigger("showAnimation", [
  transition(":enter", [
    style({ height: "10px" }),
    animate("150ms ease", style({ height: "26px" })),
  ]),
  transition(":leave", [animate("150ms ease", style({ height: 0 }))]),
]);

export const borderShowAnimation = trigger("borderShowAnimation", [
  transition(":enter", [
    style({ height: "0px", opacity: 0 }),
    animate("300ms ease", style({ height: "*", opacity: 1 })),
  ]),
  transition(":leave", [animate("300ms ease", style({ height: 0 }))]),
]);

export const pickupAnimation = trigger("pickupAnimation", [
  transition(":enter", [
    style({ height: 10 }),
    animate("100ms", style({ height: "*" })),
  ]),
  transition(":leave", [animate("50ms", style({ height: 0 }))]),
]);

export const noteLongAnimation = trigger("noteLongAnimation", [
  transition(":enter", [
    style({ width: 10 }),
    animate("100ms", style({ width: "*" })),
  ]),
  transition(":leave", [animate("300ms", style({ width: 0 }))]),
]);