Transition

transition defines the input CSS classes of the Client component and output of the SSRT, when it exists. It can also be used in components without SSRT.

gox
<@Card transition="fade">
    <div class="card">
        <h3 class="card-title">Cámara HD</h3>
        <p class="card-content">Descripción de Cámara HD</p>
    </div>
</@Card>

The internal content of Card represents the SSRT. The browser can show it immediately while GOX loads the Client component.

When the component is ready, GOX runs a cross-transition:

  • The SSRT receives the class fade-out.
  • The Client component receives the class fade-in.
  • Both animations are performed at the same time.
  • At the end, GOX eliminates the SSRT and leaves the final Client component mounted.

transition only controls the initial input or replacement. It does not intervene in subsequent changes in the internal state of the component.

See the documentation for Hydrate to learn how to decide when to start loading and activating the Client component.

SSRT

The SSRT is the static representation generated by the server for a Client component.

gox
<@Card>
    <div class="card">
        <h3 class="card-title">Cámara HD</h3>
        <p class="card-content">Descripción de Cámara HD</p>
    </div>
</@Card>

This content is part of the initial HTML of the page and remains visible until the Client component is prepared to replace it.

The SSRT allows:

  • Show content before the component JavaScript is available.
  • Avoid the component space from remaining empty during loading.
  • Statically represent your initial state.
  • Maintain a consistent appearance before and after hydration.

After the replacement, the SSRT stops intervening. The interface and its state changes become controlled by the framework used by the Client component.

Size and input without SSRT

When omitted adapt, GOX automatically encourages the dimensions during 220 mswithout the need transitionUse. Adapt to change the axles and the anchorage; or adapt="none" to deactivate only the dimensional change:

  • Without SSRT, the component is opened vertically from zero to its initial height.
  • With SSRT, the width and height pass from the dimensions of the SSRT to those of the component, both when growing and when reducing.
gox
<@Card hydrate="load" transition="fade" />

In this example there is no initial content of the server. When the component is mounted, the vertical opening is run along with fade-in; no SSRT to be applied to fade-out. The duration of the CSS animations is defined in their classes and may be different from the 220 ms of the change in size. GOX waits for the coordinated animations to end before removing the time styles.

At the end, the component recovers its normal layout. These animations only cover the initial assembly: they do not encourage subsequent changes by images, data or interaction. Size animation requires Web Animations and does not depend on prefers-reduced-motion; CSS animations can be adapted by their own means.

See SSRT to know the behavior with and without initial content.

Equivalent initial state

To achieve a uniform visual replacement, the SSRT must play as accurately as possible the initial status of the Client component.

The SSRT on the page can be defined as follows:

gox
<@Card transition="fade">
    <div class="card">
        <h3 class="card-title">Cámara HD</h3>
        <p class="card-content">Descripción de Cámara HD</p>
    </div>
</@Card>

The React component can start with the same content:

tsx
import "./style.css"

export default function Card() {
    return (
        <div className="card">
            <h3 className="card-title">Cámara HD</h3>
            <p className="card-content">Descripción de Cámara HD</p>
        </div>
    )
}

React uses className to assign CSS classes to the elements.

The styles imported by the Client component also allow to present the SSRT with the same appearance. This makes it possible to reuse classes such as card, card-title and card-content in both states.

If the structure, content and styles match, the replacement can be practically imperceptible, except for the configured transition.

Declare a transition

transition is given the basic name of the classes GOX will use during the replacement:

gox
transition="<className>"

From that name, GOX seeks two classes:

css
.<className>-in {
}

.<className>-out {
}

For example:

gox
<@Card transition="fade">
    <div class="card">
        <h3 class="card-title">Cámara HD</h3>
        <p class="card-content">Descripción de Cámara HD</p>
    </div>
</@Card>

GOX uses the following classes:

css
.fade-in {
}

.fade-out {
}

fade-in is applied to the Client component and fade-out applies to the SSRT.

Cross transition

GOX temporarily places the SSRT and the Client component in the same visual space.

During this period:

  1. The SSRT remains visible.
  2. GOX loads the Client component.
  3. The component is mounted only once next to the SSRT.
  4. GOX applies the class <className>-out to SSRT.
  5. GOX applies the class <className>-in to the Client component.
  6. The animations are run simultaneously.
  7. GOX is waiting for them to finish.
  8. GOX eliminates SSRT and animation styles.
  9. The same instance of the component remains mounted, conserving status and events.

The internal assembly containers remain in the DOM with display: contentswithout adding boxes to the layout. GOX does not move the nodes of the framework or call again to mount At the end of the animation. The disassembly is done when the island is disconnected. These containers remain part of the DOM hierarchy: the direct child selectors (>) must be taken into account.

This behavior produces a cross-effect between the output of the SSRT and the input of the Client component.

The GOX runtime coordinates the change of size through Web Animations and the input and output animations defined in CSS.

Create a transition

The file imported by the component may contain the transition classes and the styles shared with the SSRT:

css
.fade-in {
    animation: fade-in 300ms ease both;
}

.fade-out {
    animation: fade-out 300ms ease both;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.card {
    padding: 1rem;
    border: 1px solid #d9d9d9;
    border-radius: 0.5rem;
    background: #ffffff;
}

.card-title {
    margin: 0 0 0.5rem;
}

.card-content {
    margin: 0;
}

The React component matters this file:

tsx
import "./style.css"

export default function Card() {
    return (
        <div className="card">
            <h3 className="card-title">Cámara HD</h3>
            <p className="card-content">Descripción de Cámara HD</p>
        </div>
    )
}

The page uses the same classes to generate the SSRT:

gox
<@Card transition="fade">
    <div class="card">
        <h3 class="card-title">Cámara HD</h3>
        <p class="card-content">Descripción de Cámara HD</p>
    </div>
</@Card>

In this way, the SSRT and the loaded component share their appearance, while fade-in and fade-out control only the replacement between the two.

Partial transitions

It is not mandatory to declare the two classes of transition.

To encourage only the input of the Client component:

css
.fade-in {
    animation: fade-in 300ms ease both;
}

Yeah. .fade-out does not define an animation, the SSRT remains without output animation.

To encourage the SSRT output only:

css
.fade-out {
    animation: fade-out 300ms ease both;
}

Yeah. .fade-in does not define an animation, the Client component appears without input animation.

When both classes contain animations, GOX runs them as a cross-transition.

The absence of one of the animations does not make a mistake. GOX continues the replacement without waiting for an animation for that state.

Performance without transition

If omitted transition, GOX does not create the process of cross animation.

gox
<@Card>
    <div class="card">
        <h3 class="card-title">Cámara HD</h3>
        <p class="card-content">Descripción de Cámara HD</p>
    </div>
</@Card>

When the Client component is ready, GOX replaces the SSRT without fade. If its dimensions are different and omitted adapt, encourages the width and height for 220 m before removing the time styles and maintaining the same instance of the component.

The SSRT remains useful even if there is no transition, because it provides the initial content while the component is waiting to be activated.

Dynamic values

transition you can also receive the result of an expression of Go:

gox
func ProductCard() gox.Component {
    effect := "fade"

    return <@Card transition={{effect}}>
        <div class="card">
            <h3 class="card-title">Cámara HD</h3>
            <p class="card-content">Descripción de Cámara HD</p>
        </div>
    </@Card>
}

The value produced by the expression is used as the base name:

text
fade

GOX therefore applies:

css
.fade-in {
}

.fade-out {
}

The corresponding classes must exist in the styles available for the component.

See the documentation for Components to learn how to combine Client components with gox.Component and create reusable components.

Best practices

  • It builds the SSRT as a useful representation of the initial state of the component.
  • Keep the structure, content and initial styles of both states equivalent when you want to avoid sudden visual changes.
  • It uses the same set of classes for the SSRT and the Client component.
  • Reserve transition for initial replacement and controls subsequent animations from the framework itself.
  • Keep the inlet and out animations short.
  • Avoid transitions that make reading difficult or unnecessarily delay interaction.
  • Declares only -in or -out when you don't need to encourage both states.
  • Check the result with the different hydration strategies used by the component.
  • Verifies that the SSRT remains understandable even though JavaScript is late to load.

To learn more about ClientSee your documentation. To learn more about StatementsSee your documentation. To learn more about Isolate, check your documentation.

See also

Next step

Continue with the documentation for Isolate to learn to isolate the styles and assembly of a Client component.

Isolate

See Adapt to choose the axes and anchorage of the dimensional adaptation, or to deactivate it without affecting the CSS effects.