Olova

Appearance

i-transition ​

i-transition Directive ​

The i-transition directive allows you to add smooth enter/leave transitions to elements in your application.

Usage ​

Add the i-transition attribute to any element you want to apply transitions to:

html
<div i-transition="fade, 500, ease-in-out">
<!-- Content to be transitioned -->
</div>

Syntax ​

The i-transition attribute accepts up to three comma-separated parameters:

  1. Transition name (optional, default: fade)
  2. Duration in milliseconds (optional, default: 300)
  3. Easing function (optional, default: ease)

Example:

html
<div i-transition="slide, 1000, linear">
<!-- Content -->
</div>

Predefined Transitions ​

The framework comes with a default "fade" transition that animates the opacity and vertical position of the element. You can easily extend this with custom transitions by modifying the transitionHooks object in the framework.

Combining with i-show ​

The i-transition directive works seamlessly with the i-show directive to create smooth show/hide animations:

html
<div i-transition i-show="isVisible">
This content will fade in and out smoothly.
</div>

Customizing Transitions ​

To create custom transitions, you can modify the transitionHooks object in the framework. Each transition hook (e.g., beforeEnter, enter, afterEnter, etc.) can be customized to achieve the desired effect.

Performance Note ​

Transitions are implemented using CSS transitions for optimal performance. The framework automatically adds and removes the necessary inline styles to trigger the transitions.