:inTransition and :outTransition

The :inTransition and :outTransition directives are identical to :transition, except that the resulting transitions are not bidirectional — an in transition will continue to ‘play’ alongside the out transition, rather than reversing, if the element is outroed while the transition is in progress. If an out transition is aborted, transitions will restart from scratch.

<TransitionGroup>
  <Show when={isVisible()}>
    <div use:inTransition={fly} use:outTransition={fade}>
      flies in, fades out
    </div>
  </Show>
</TransitionGroup>