[Mantine UI Series] Transition

[reboottime]

Overview

This React daily article discusses the design of the Transition component in Mantine UI, and its rationales - CSS3 transitions and corresponding JavaScript events.

[reboottime]

The rationales: CSS3 transition and JavaScript Transition Events

How CSS3 transition works

1. You declare the transition works on which property with what kind of animation function and duration
2. Triggering change on the transition property which triggers the transition. An example is to adding decoration class to a main class and trigger property changes.

For example

.notification {
   background: red;
   height: 24px;
   width: 100px;
   transition: background-color ease .2s;
}

.notification.warning {
  background-color: yellow;
}

Corresponding JavaScript events

• transitionStart: An Event fired when a CSS transition has started transitioning.
• transitionEnd: An Event fired when a CSS transition has finished playing.

[reboottime]

Mantine UI Transition component

• The Transition component in Mantine UI serves as a wrapper

  • that generates and applies transition styles to its child.

  • binds event listeners on different transition stages, such as onEnter, onExit, onEntered, etc.

    • While these event listeners names are similar to JavaScript transition events, yet, under the hood these handlers are called based on transition durations rather than the transition events triggered on the DOM.

    • The Transition component acts as a wrapper and does not have an associated HTML element itself. So there is no way to attach JavaScript event listeners on itself at all.

  • define transition triggering via the mounted property

Here's an example code snippet that demonstrates the usage of the Transition component:

<Transition mounted={opened} transition={scaleY} duration={200} timingFunction="ease">
  {(styles) => (
    <Paper
      shadow="md"
      style={{ ...styles, position: 'absolute', top: 0, left: 0, right: 0, height: rem(120) }}
      ref={clickOutsideRef}
    >
      Dropdown
    </Paper>
  )}
</Transition>

As you see above, the child(only one direct child) of the Transition component is implemented as a function. .

• The mounted property: the transition is triggered once the mounted is true, so the transition passed to Transition needs to define both the in(mounted is true) and out (mounted is false) about what the values will be for these transitionable properties.
  • Mantine UI also provides some commonly used transitions
  • transition styles generation example

[reboottime]

References

1. MDN: transition events
2. Mantine UI: Transition
3. CSS3 transition