All examples below are based on the vue-skeleton by hjeti.

Folder structure

/components
├── [ComponentName]/
│   └── index.js
│   └── [ComponentName].vue
│   └── [ComponentName].js
│   └── [ComponentName].scss
│   └── [ComponentName]TransitionController.ts
└── ...

For demonstration purpose we will create a new component called DummyComponent.

DummyComponent.vue

The *.vue file does not require any modification.

DummyComponent.js

HandleAllComponentsReady is triggered when all the child components are 'ready'. Therefore we can create the DummyComponentTransition and be sure that all the child components are initialized.

import AbstractTransitionComponent from 'vue-transition-component';
import DummyComponentTransition from 'component/DummyComponent/DummyComponentTransition';

export default {
  name: 'DummyComponent',
  extends: AbstractTransitionComponent,
  methods: {
    handleAllComponentsReady() {
      this.transitionController = new DummyComponentTransition(this);
      this.isReady();
    },
  },
};

Note: Vue.js will overwrite your methods so be aware of overwriting the following methods:

  1. isReady
  2. handleAllComponentsReady
  3. transitionIn
  4. transitionOut
  5. checkComponentsReady
  6. componentReady
  7. getChild
  8. hasChild

DummyComponentTransitionController.ts

This file will contain all the transitions for your page, you can add tweens to the provided greensock timelines.

import AbstractTransitionController from 'vue-transition-component';

class DummyComponentTransition extends AbstractTransitionController
{
  /**
   * @public
   * @method setupTransitionInTimeline
   * @description Use this method to setup your transition in timeline
   * */
  protected setupTransitionInTimeline(): void {
  }

  /**
  * @public
  * @method setupTransitionOutTimeline
  * @description Use this method to setup your transition out timeline
  * */
  protected setupTransitionOutTimeline(): void {
  }
}

export default DummyComponentTransition;

To setup the transitionIn you could do the following:

...
protected setupTransitionInTimeline(): void {
  this.transitionInTimeline.fromTo(this.viewModel.$el, 1, {autoAlpha: 0}, {autoAlpha: 1});
}
...
````

To setup the transitionOut you can pretty much do the same thing, keep in mind that if the transitionOutTimeline is not set it will reverse the transitionInTimeline.

```javascript
...
protected setupTransitionOutTimeline(): void {
  this.transitionOutTimeline.to(this.viewModel.$el, 1, {autoAlpha: 0});
}
...

index.js

The index.js file just imports the main javascript file so you can easily import it!

import DummyComponent from './DummyComponent';

export default DummyComponent;

Rendering the component

Using transition components is the same as using any other component in Vue.js exept for the fact that you have to provide two extra props. The componentReady listener is the callback for when the component is ready and the componentId is the unique id of the component.

<DummyComponent componentId="DummyComponent"/>