Transitions

Role#

A transition is an animation between two values.

Transitions are available on screens, views and primitives. They are defined by using the transitions class keyword or with the setNextTransition function which will apply a transition for next value change.

With transitions, the property will have the end value even if it is animated without waiting delay or duration.

Expected use#

Transitions have 3 properties, delay, duration and easing.

• delay: delay before animation starts,
• duration: duration of the animation,
• easing: easing function, a math function to describe speed of the animation. Use the ones described in statics of $Easing.

transitions: {
    y: {
        delay: 100,
        duration: 200,
        easing: $Easing.easeInOutQuad
    },
    "children.opacity": {
        delay: 100,
        duration: 300,
        easing: $Easing.easeInOutQuad
    }
}

Transition keyword#

There is multiple configuration possibilities:

Default transition#

• Will be applied every time value changes
• Will be applied every time property of child value changes

State transition#

• Will be applied when state changes to stateA. Example:

transitions: {
    stateA: {
        y: {
            duration: 200
        }
    }
}

• Will be applied when state changes to stateB from stateA. Example:

transitions: {
    "stateA > stateB": {
        y: {
            duration: 200
        }
    }
}

Dana already exposes the following states: default, selected, focused.

Advanced use case#

Skip transition#

Using skipTransition will skip transition for next value change of this property. It is only applied once for the next change, all the following ones will have transition back. As an alternative you can also use toggleTransition(property: String, value: Boolean) that will allow to enable or disable transition based on the value parameters

/**
 * skipTransition: (property) {}
 * @param {string} property - property on which skip next transition (ex: 'x', 'opacity')
 */

view.skipTransition('x');

/**
 * Toggle transitions.
 * Set value to true to enable transitions, false to disable transitions
 * @param {string} property  property on which disable transitions
 * @param {boolean | undefined} value should disable or not transitions (true to enable transitions, false to disable transitions)
 */

view.toggleTransition("x", true);

Set the next transition#

Using setNextTransition will allow you to define a transition for the next value change of the property. It is only applied once for the next change, all the following ones will have default transition back.

/**
 * setNextTransition: (property, settings)
 * @param {string} property - property on which apply transition (ex: 'x', 'opacity')
 * @param {{duration: number, easing: Easing, delay: number}} settings -
 */

view.setNextTransition('x', {duration: 200, delay: 100});