Re-initialize the transitionInTimeline

The transitionInTimeline is initialized when the component is constructed. This is because we need the the initial state to be set when the instance is constructed. If you still want to reset the transitioninTimeline you can call the setupTimeline with the TimelineType set to IN.

Example with setupTimeline

...
// Provide the default label when constructing the transition controller
const transitionController = new DummyTransitionController(this, {
  transitionInId: 'transition-in-id-1',
})

// Re-initialize the transitionInTimeline with another id
transitionController.setupTimeline(TimelineType.IN, 'timeline-in-id-2');
...

Re-initialize the transitionOutTimeline

Even though the transition out timeline is not initialized until it's requested, you still might want to be able to re-initialize it. This can be done by calling the transitionOut method with the reset flag set to true or re-calling the setupTimeline with the Type set to OUT

Example with setupTimeline

...
// Provide the default label when constructing the transition controller
const transitionController = new DummyTransitionController(this, {
  transitionInId: 'transition-in-id-1',
  transitionOutId: 'transition-out-id-1',
});

transitionController.transitionIn()
  // Call the transitionOutTimeline for the first time, this will initialize it.
  .then(() => )transitionController.transitionOut()
  // Call the transition in so we hide it again afterwards
  .then(() => transitionController.transitionIn())
  // Re-call the transition out method but this time with another id and the reset flag to tru
  .then(() => {
    // Call the setup to change the out timeline
    transitionController.setupTimeline(TimelineType.OUT, 'transition-out-id-2');
  });
...

Example with transitionOut

...
// Provide the default label when constructing the transition controller
const transitionController = new DummyTransitionController(this, {
  transitionInId: 'transition-in-id-1',
  transitionOutId: 'transition-out-id-1',
})

transitionController.transitionIn()
  // Call the transitionOutTimeline for the first time, this will initialize it.
  .then(() => )transitionController.transitionOut()
  // Call the transition in so we hide it again afterwards
  .then(() => transitionController.transitionIn())
  // Re-call the transition out method but this time with another id and the reset flag to tru
  .then(() => transitionController.transitionOut(false, 'transition-out-id-2', true));
...

Re-initialize the loopingAnimationTimeline

The looping animation timeline always uses a new timeline when it's started. So every time you call the startLoopingAnimation it will reset the old timeline. You can also reset it using the setupTimeline method.

Example with setupTimeline

...
// Provide the default label when constructing the transition controller
const transitionController = new DummyTransitionController(this)

// Calling the start method will initialize the looping timeline
transitionController.startLoopingAnimation('loop-id-1');

// Re-calling the start method will re-initialize the looping timeline
setTimeout(() => {
    transitionController.setupTimeline(TimelineType.LOOPING, 'loop-id-2');
}, 1000);
...

Example with startLoopingAnimation

...
// Provide the default label when constructing the transition controller
const transitionController = new DummyTransitionController(this)

// Calling the start method will initialize the looping timeline
transitionController.startLoopingAnimation('loop-id-1');

// Re-calling the start method will re-initialize the looping timeline
setTimeout(() => {
    transitionController.startLoopingAnimation('loop-id-2');
}, 1000);
...