Transition

Transition is a component for animating a single element while it enters or leaves your application. There's a set of built-in types you can use: Fade, FadeInLeft, FadeInRight, Grow and Zoom. Wrap the component that should be animated and use the boolean in property to animate in and out. Please note that you might have to set explicit dimensions to the parent of the animated component in order to prevent a page jumps.

<React.Fragment>
  <Form>
    <ControlGroup>
      <ControlGroupItem
        label="Transition type"
      >
        <Dropdown
          onChange={[Function onChange]}
          options={
            Array [
              Object {
                "label": "Fade",
                "value": "Fade",
              },
              Object {
                "label": "FadeInLeft",
                "value": "FadeInLeft",
              },
              Object {
                "label": "FadeInRight",
                "value": "FadeInRight",
              },
              Object {
                "label": "Grow",
                "value": "Grow",
              },
              Object {
                "label": "Zoom",
                "value": "Zoom",
              },
            ]
          }
          value="Fade"
        />
      </ControlGroupItem>
    </ControlGroup>
    <ControlGroup>
      <ControlGroupItem
        label="Show box"
      >
        <CheckBox
          id="checkbox-is-box-visible"
          onChange={[Function onChange]}
        />
      </ControlGroupItem>
    </ControlGroup>
  </Form>
  <div
    style={
      Object {
        "height": 200,
        "width": 200,
      }
    }
  >
    <Transition
      in={true}
      type="Fade"
    >
      <div
        style={
          Object {
            "background": "deeppink",
            "height": 200,
            "width": 200,
          }
        }
      >
        This box will be animated using 
        Fade
        .
      </div>
    </Transition>
  </div>
</React.Fragment>
This box will be animated using Fade.