Package Exports

nativescript-child-animations

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (nativescript-child-animations) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Nativescript Child Animations

A small nativescript plugin that makes it easier to animate multiple child elements.

Installation

In your nativescript source directory, run:

tns plugin add nativescript-child-animations

This should add the child animations package to your package.json within your project ready for use.

Usage

This child animations package works by supplying a function with : a parent (container) view, an animation definition, a delay between animating each child view and optionally a 'reverse' boolean.

Import NativescriptChildAnimations module in the component that you'd like to use it in:
```
import { animateChildren } from 'nativescript-child-animations';
```

Call the animateChildren() function with params:

animateChildren(parentView, animationDef, 70);

Example

example.component.html

<FlexBoxLayout flexDirection="column" id="parent">
  <Label style="transform: translate(0, -800)" text="I'm First!"></Label>
  <Label style="transform: translate(0, -800)" text="I'm Second!"></Label>
  <Label style="transform: translate(0, -800)" text="I'm Third!"></Label>
</FlexBoxLayout>

example.component.ts

import { animateChildren } from 'nativescript-child-animations';
import { Component, OnInit } from '@angular/core';
import { Page } from 'tns-core-modules/ui/page/page';
import { FlexboxLayout } from 'tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout';
import { StackLayout } from 'tns-core-modules/ui/layouts/stack-layout/stack-layout';
import { AnimationDefinition } from 'tns-core-modules/ui/animation/animation';
import { AnimationCurve } from 'tns-core-modules/ui/enums';

@Component({
    selector: 'Home',
    moduleId: module.id,
    templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit {
    parentView: FlexboxLayout | StackLayout;
    animationDef: AnimationDefinition = {
        translate: { x: 0, y: 0 },
        duration: 1000,
        curve: AnimationCurve.easeOut
    }

    constructor(private page: Page) {}

    ngOnInit(): void {
        this.page.on('navigatedTo', () => {
            this.parentView = this.page.getViewById('parent');
            animateChildren(this.parentView, this.animationDef, 70, true);
        });
    }
}