childPropsByPhase property

Map<TransitionPhase, Map?>? childPropsByPhase
getter/setter pair

An optional map of props to apply to the single child based on the current transition phase.

This provides you with the ability to add CSS classes / other DOM attributes based on the granular transition states that are confined within the WithTransition component without having to utilize state change callbacks to update your component's state.

NOTE: These values will override any prop values set on the child itself if the key(s) in the Map are the same.

Example:

UiFactory<WithTransitionExampleProps> WithTransitionExample = uiFunction(
  (props) {
    final isShown = useState(false);

    return (WithTransition()
      ..isShown = isShown.value
      ..childPropsByPhase = useMemo(() => {
        TransitionPhase.PRE_SHOWING: domProps()..className = 'before-showing',
        TransitionPhase.SHOWING: domProps()..className = 'showing',
        TransitionPhase.SHOWN: domProps()..className = 'shown',
        TransitionPhase.HIDING: domProps()..className = 'hiding',
        TransitionPhase.HIDDEN: domProps()..className = 'hidden',
      })
    )(
      // The child that has CSS transitions
    );
  },
  _$WithTransitionExampleConfig, // ignore: undefined_identifier
);

Implementation

Map<TransitionPhase, Map?>? childPropsByPhase;