transition.py 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. """A transition Component."""
  2. from typing import Union
  3. from reflex.components.libs.chakra import ChakraComponent
  4. from reflex.vars import Var
  5. class Transition(ChakraComponent):
  6. """Base componemt of all transitions."""
  7. # Show the component; triggers when enter or exit states
  8. in_: Var[bool]
  9. # If true, the element will unmount when `in={false}` and animation is done
  10. unmount_on_exit: Var[bool]
  11. class Fade(Transition):
  12. """Fade component cab be used show and hide content of your app."""
  13. tag = "Fade"
  14. class ScaleFade(Transition):
  15. """Fade component can be scaled and reverse your app."""
  16. tag = "ScaleFade"
  17. # The initial scale of the element
  18. initial_scale: Var[float]
  19. # If true, the element will transition back to exit state
  20. reverse: Var[bool]
  21. class Slide(Transition):
  22. """Side can be used show content below your app."""
  23. tag = "Slide"
  24. # The direction to slide from
  25. direction: Var[str]
  26. class SlideFade(Transition):
  27. """SlideFade component."""
  28. tag = "SlideFade"
  29. # The offset on the horizontal or x axis
  30. offsetX: Var[Union[str, int]]
  31. # The offset on the vertical or y axis
  32. offsetY: Var[Union[str, int]]
  33. # If true, the element will be transitioned back to the offset when it leaves. Otherwise, it'll only fade out
  34. reverse: Var[bool]
  35. class Collapse(Transition):
  36. """Collapse component can collapse some content."""
  37. tag = "Collapse"
  38. # If true, the opacity of the content will be animated
  39. animateOpacity: Var[bool]
  40. # The height you want the content in its expanded state.
  41. endingHeight: Var[str]
  42. # The height you want the content in its collapsed state.
  43. startingHeight: Var[Union[str, int]]