Vue Popup - animation

Configures UI component visibility animations. This object contains two fields: show and hide.

Selector: DxAnimation
Type:

Object

The following code shows default values of the object depending on the device type:

Desktop
iOS
Android
Android FullScreen
{
    show: {
        type: 'pop',
        duration: 300,
        from: {
            scale: 0.55
        }
    },
    hide: {
        type: 'pop',
        duration: 300,
        to: {
            opacity: 0,
            scale: 0.55
        },
        from: {
            opacity: 1,
            scale: 1
        }
    }
}
{
    show: {
        type: 'slide',
        duration: 400,
        from: {
            position: {
                my: 'top',
                at: 'bottom'
            }
        },
        to: {
            position: {
                my: 'center',
                at: 'center'
            }   
        }
    },
    hide: {
        type: 'slide',
        duration: 400,
        from: {
            opacity: 1,
            position: {
                my: 'center',
                at: 'center'
            }
        },
        to: {
            opacity: 1,
            position: {
                my: 'top',
                at: 'bottom'
            }
        }
    }
}
{
    show: {
        type: 'fade',
        duration: 400,
        from: 0,
        to: 1
    },
    hide: {
        type: 'fade',
        duration: 400,
        from: 1,
        to: 0
    }   
}
{
    show: {
        type: 'slide',
        duration: 300,
        from: {
            top: '30%',
            opacity: 0
        },
        to: {
            top: 0,
            opacity: 1
        }
    },
    hide: {
        type: 'slide',
        duration: 300,
        from: {
            top: 0,
            opacity: 1
        },
        to: {
            top: '30%',
            opacity: 0
        }
    }
}

Use the position property to specify the position in which the UI component is shown and from which it is hidden.

Set the animation object to null or undefined to disable animations.

hide

An object that defines the animation properties used when the UI component is being hidden.

Selector: DxHide
Type:

AnimationConfig

Default Value: { type: 'slide', duration: 400, from: { position: { my: 'center', at: 'center', of: window } }, to: { position: { my: 'top', at: 'bottom', of: window } }} (iOS)

show

An object that defines the animation properties used when the UI component is being shown.

Selector: DxShow
Type:

AnimationConfig

Default Value: { type: 'slide', duration: 400, from: { position: { my: 'top', at: 'bottom', of: window } }, to: { position: { my: 'center', at: 'center', of: window } }} (iOS)