useTransition.ts 589 B

12345678910111213141516171819202122232425262728
  1. // @ts-nocheck
  2. import {ease} from './animation/ease';
  3. import {Timeline, Animation} from './animation/';
  4. import {ref, watch, Ref} from './vue'
  5. export function useTransition(percent: Ref<number>, options: {duration: number}) {
  6. const current = ref(0)
  7. const {immediate, duration} = options
  8. let tl = new Timeline();
  9. const stop = watch(() => percent.value, (v) => {
  10. tl.start();
  11. tl.add(
  12. new Animation(
  13. current.value,
  14. v,
  15. duration,
  16. 0,
  17. ease,
  18. v => {
  19. current.value = v < 0.0001 ? 0: v
  20. }
  21. )
  22. );
  23. }, {immediate})
  24. return [current, stop]
  25. }