:transition

A transition is triggered when the contents of a TransitionGroup component are entering or leaving the DOM as a result of a state change. Transition directive must be on an element that is an immediate child of a TransitionGroup component.

The transition directive indicates a bidirectional transition, which means it can be smoothly reversed while the transition is in progress.

Transitions can be used with built-in transition functions or custom transition functions.

const [isVisible, setVisible] = createSignal(true);

<TransitionGroup>
  <Show when={isVisible()}>
    <div use:transition={fade}>fades in and out</div>
  </Show>
</TransitionGroup>;

Transition Parameters

Transitions can have parameters.

<TransitionGroup>
  <Show when={isVisible()}>
    <div use:transition={(node) => fade(node, { duration: 2000 })}>
      fades in and out over two seconds
    </div>
  </Show>
</TransitionGroup>

Custom transition functions

transition = (node: HTMLElement, params: any, options: { direction: 'in' | 'out' | 'both' }) => {
  delay?: number,
  duration?: number,
  easing?: (t: number) => number,
  css?: (t: number, u: number) => string,
  tick?: (t: number, u: number) => void
}

Transitions can use custom functions. If the returned object has a css function, Solivelte will generate keyframes for a web animation.

The t argument passed to css is a value between 0 and 1 after the easing function has been applied. In transitions run from 0 to 1, out transitions run from 1 to 0 — in other words, 1 is the element’s natural state, as though no transition had been applied. The u argument is equal to 1 - t.

The function is called repeatedly before the transition begins, with different t and u arguments.

import { elasticOut } from "solivelte";

function whoosh(
  node: HTMLElement,
  params: { delay?: number, duration?: number, easing?: (t: number) => number }
): TransitionConfig {
  const existingTransform = getComputedStyle(node).transform.replace(
    "none",
    ""
  );

  return {
    delay: params.delay || 0,
    duration: params.duration || 400,
    easing: params.easing || elasticOut,
    css: (t, u) => `transform: ${existingTransform} scale(${t})`,
  };
}

<TransitionGroup>
  <Show when={isVisible()}>
    <div use:transition={whoosh}>whooshes in and out</div>
  </Show>
</TransitionGroup>;

A custom transition function can also return a tick function, which is called during the transition with the same t and u arguments.

If it’s possible to use css instead of tick, do so — web animations can run off the main thread, preventing jank on slower devices.

function typewriter(
  node: HTMLElement,
  { speed = 1 }: { speed?: number }
): TransitionConfig {
  const valid =
    node.childNodes.length === 1 &&
    node.childNodes[0].nodeType === Node.TEXT_NODE;

  if (!valid) {
    throw new Error(
      `This transition only works on elements with a single text node child`
    );
  }

  const text = node.textContent;
  const duration = text!.length / (speed * 0.01);

  return {
    duration,
    tick: (t) => {
      const i = ~~(text!.length * t);
      node.textContent = text!.slice(0, i);
    },
  };
}

<TransitionGroup>
  <Show when={isVisible()}>
    <p use:transition={typewriter}>
      The quick brown fox jumps over the lazy dog
    </p>
  </Show>
</TransitionGroup>;

Transition functions also receive a third argument, options, which contains information about the transition.

Available values in the options object are:

• direction - one of in, out, or both depending on the type of transition.

Transition events

An element with transitions will dispatch the following events in addition to any standard DOM events:

• introstart
• introend
• outrostart
• outroend

<TransitionGroup>
  <Show when={isVisible()}>
    <p
      use:transition={fly}
      on:introstart={() => console.log("intro started")}
      on:outrostart={() => console.log("outro started")}
      on:introend={() => console.log("intro ended")}
      on:outroend={() => console.log("outro ended")}
    >
      flies in and out
    </p>
  </Show>
</TransitionGroup>