Skip to main content

Transition

Overview​

Colorizes enclosed content with a monochome color based on the current phase of the gradient; this tag is similar to the Gradient-Tag, just that the gradient does not occur on a char-by-char basis, but instead on a whole-content basis. This feature usually makes the most sense not necessarily in chat, but at in-place updatable slots like the action-bar, tab, scoreboard, etc. Check out the details regarding these attributes over at the aforementioned Gradient-Tag, as they behave exactly the same and their documentation is therefore kept centrally.

<transition

  phase: number(0)

  ↪ Phase-offset of the transition; 0-100%

  color, c: color(null)

  ↪ A color-point to be used within the gradient

  offset, o: number(null)

  ↪ The offset of the corresponding color-point; 0-100%

  z-index, z: number(null)

  ↪ The z-index of the corresponding color-point; integer

  override-colors: boolean(false)

  ↪ Whether to override already colorized members

  skip-whitespace: boolean(true)

  ↪ Whether to skip whitespace when coloring

  skip-non-text: boolean(false)

  ↪ Whether to skip atomic units like <key/>

  merge-inner: boolean(false)

  ↪ Whether to merge inner rainbows for continuity

  deep: boolean(false)

  ↪ Whether to dive into children's markup-attributes

>markup</>

Examples​

Two Color Transition​

The simplest form of a transition is that between two colors.

Code-Blocks are only available within the browser

Three Color Transition​

By adding another color, the offsets along the transition will be automatically balanced if not specified otherwise.

Code-Blocks are only available within the browser

Injected Static Color​

If not specified otherwise, existing colors won't be overridden, allowing the user to set certain statically tinted highlights.

Code-Blocks are only available within the browser