transition.py 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. """A transition Component."""
  2. from typing import Union
  3. from reflex.components.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]]