docs/typedoc/classes/abstracttransitioncontroller.html
<!doctype html>
<html class="default no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AbstractTransitionController | VueTransitionComponent</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../assets/css/main.css">
</head>
<body>
<header>
<div class="tsd-page-toolbar">
<div class="container">
<div class="table-wrap">
<div class="table-cell" id="tsd-search" data-index="../assets/js/search.js" data-base="..">
<div class="field">
<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
<input id="tsd-search-field" type="text" />
</div>
<ul class="results">
<li class="state loading">Preparing search index...</li>
<li class="state failure">The search index is not available</li>
</ul>
<a href="../index.html" class="title">VueTransitionComponent</a>
</div>
<div class="table-cell" id="tsd-widgets">
<div id="tsd-filter">
<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
<div class="tsd-filter-group">
<div class="tsd-select" id="tsd-filter-visibility">
<span class="tsd-select-label">All</span>
<ul class="tsd-select-list">
<li data-value="public">Public</li>
<li data-value="protected">Public/Protected</li>
<li data-value="private" class="selected">All</li>
</ul>
</div>
<input type="checkbox" id="tsd-filter-inherited" checked />
<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
<input type="checkbox" id="tsd-filter-only-exported" />
<label class="tsd-widget" for="tsd-filter-only-exported">Only exported</label>
</div>
</div>
<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
</div>
</div>
</div>
</div>
<div class="tsd-page-title">
<div class="container">
<ul class="tsd-breadcrumb">
<li>
<a href="../index.html">Globals</a>
</li>
<li>
<a href="abstracttransitioncontroller.html">AbstractTransitionController</a>
</li>
</ul>
<h1>Class AbstractTransitionController<T></h1>
</div>
</div>
</header>
<div class="container container-main">
<div class="row">
<div class="col-8 col-content">
<section class="tsd-panel tsd-comment">
<div class="tsd-comment tsd-typography">
<div class="lead">
<h3 id="abstracttransitioncontroller">AbstractTransitionController</h3>
<p>The AbstractTransitionController is the main class of the module. See the sub-pages for detailed information about the properties and methods.</p>
</div>
</div>
</section>
<section class="tsd-panel tsd-type-parameters">
<h3>Type parameters</h3>
<ul class="tsd-type-parameters">
<li>
<h4>T</h4>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>This param defines the type of the parent controller, this is of course framework specific.</p>
</div>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-hierarchy">
<h3>Hierarchy</h3>
<ul class="tsd-hierarchy">
<li>
<span class="tsd-signature-type">EventDispatcher</span><span class="tsd-signature-symbol"><</span><a href="transitionevent.html" class="tsd-signature-type">TransitionEvent</a><span class="tsd-signature-symbol">></span>
<ul class="tsd-hierarchy">
<li>
<span class="target">AbstractTransitionController</span>
</li>
</ul>
</li>
</ul>
</section>
<section class="tsd-panel">
<h3>Implements</h3>
<ul class="tsd-hierarchy">
<li><span class="tsd-signature-type">IDisposable</span></li>
</ul>
</section>
<section class="tsd-panel-group tsd-index-group">
<h2>Index</h2>
<section class="tsd-panel tsd-index-panel">
<div class="tsd-index-content">
<section class="tsd-index-section ">
<h3>Constructors</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-constructor tsd-parent-kind-class tsd-is-overwrite"><a href="abstracttransitioncontroller.html#constructor" class="tsd-kind-icon">constructor</a></li>
</ul>
</section>
<section class="tsd-index-section ">
<h3>Properties</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-property tsd-parent-kind-class"><a href="abstracttransitioncontroller.html#ishidden" class="tsd-kind-icon">is<wbr>Hidden</a></li>
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-inherited tsd-is-protected"><a href="abstracttransitioncontroller.html#listeners" class="tsd-kind-icon">listeners</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="abstracttransitioncontroller.html#loopinganimationstarted" class="tsd-kind-icon">looping<wbr>Animation<wbr>Started</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="abstracttransitioncontroller.html#loopinganimationtimeline" class="tsd-kind-icon">looping<wbr>Animation<wbr>Timeline</a></li>
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-inherited"><a href="abstracttransitioncontroller.html#parent" class="tsd-kind-icon">parent</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="abstracttransitioncontroller.html#parentcontroller" class="tsd-kind-icon">parent<wbr>Controller</a></li>
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-inherited tsd-is-protected"><a href="abstracttransitioncontroller.html#target" class="tsd-kind-icon">target</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="abstracttransitioncontroller.html#transitionintimeline" class="tsd-kind-icon">transition<wbr>InTimeline</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="abstracttransitioncontroller.html#transitionouttimeline" class="tsd-kind-icon">transition<wbr>Out<wbr>Timeline</a></li>
</ul>
</section>
<section class="tsd-index-section ">
<h3>Methods</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter tsd-is-inherited"><a href="abstracttransitioncontroller.html#addeventlistener" class="tsd-kind-icon">add<wbr>Event<wbr>Listener</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-inherited"><a href="abstracttransitioncontroller.html#dispatchevent" class="tsd-kind-icon">dispatch<wbr>Event</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-overwrite"><a href="abstracttransitioncontroller.html#dispose" class="tsd-kind-icon">dispose</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><a href="abstracttransitioncontroller.html#getcomponent" class="tsd-kind-icon">get<wbr>Component</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="abstracttransitioncontroller.html#gettimeline" class="tsd-kind-icon">get<wbr>Timeline</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="abstracttransitioncontroller.html#gettimelinedurationforcomponent" class="tsd-kind-icon">get<wbr>Timeline<wbr>Duration<wbr>For<wbr>Component</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter tsd-is-inherited"><a href="abstracttransitioncontroller.html#haseventlistener" class="tsd-kind-icon">has<wbr>Event<wbr>Listener</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><a href="abstracttransitioncontroller.html#init" class="tsd-kind-icon">init</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-inherited"><a href="abstracttransitioncontroller.html#isdisposed" class="tsd-kind-icon">is<wbr>Disposed</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-inherited tsd-is-protected"><a href="abstracttransitioncontroller.html#listenersorter" class="tsd-kind-icon">listener<wbr>Sorter</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-inherited"><a href="abstracttransitioncontroller.html#removealleventlisteners" class="tsd-kind-icon">remove<wbr>All<wbr>Event<wbr>Listeners</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter tsd-is-inherited"><a href="abstracttransitioncontroller.html#removeeventlistener" class="tsd-kind-icon">remove<wbr>Event<wbr>Listener</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="abstracttransitioncontroller.html#resettimeline" class="tsd-kind-icon">reset<wbr>Timeline</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><a href="abstracttransitioncontroller.html#setuploopinganimationtimeline" class="tsd-kind-icon">setup<wbr>Looping<wbr>Animation<wbr>Timeline</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="abstracttransitioncontroller.html#setuptimeline" class="tsd-kind-icon">setup<wbr>Timeline</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><a href="abstracttransitioncontroller.html#setuptransitionintimeline" class="tsd-kind-icon">setup<wbr>Transition<wbr>InTimeline</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><a href="abstracttransitioncontroller.html#setuptransitionouttimeline" class="tsd-kind-icon">setup<wbr>Transition<wbr>Out<wbr>Timeline</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="abstracttransitioncontroller.html#startloopinganimation" class="tsd-kind-icon">start<wbr>Looping<wbr>Animation</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="abstracttransitioncontroller.html#stoploopinganimation" class="tsd-kind-icon">stop<wbr>Looping<wbr>Animation</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="abstracttransitioncontroller.html#transitionin" class="tsd-kind-icon">transition<wbr>In</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="abstracttransitioncontroller.html#transitionout" class="tsd-kind-icon">transition<wbr>Out</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-inherited"><a href="abstracttransitioncontroller.html#willtrigger" class="tsd-kind-icon">will<wbr>Trigger</a></li>
</ul>
</section>
</div>
</section>
</section>
<section class="tsd-panel-group tsd-member-group ">
<h2>Constructors</h2>
<section class="tsd-panel tsd-member tsd-kind-constructor tsd-parent-kind-class tsd-is-overwrite">
<a name="constructor" class="tsd-anchor"></a>
<h3>constructor</h3>
<ul class="tsd-signatures tsd-kind-constructor tsd-parent-kind-class tsd-is-overwrite">
<li class="tsd-signature tsd-kind-icon">new <wbr>Abstract<wbr>Transition<wbr>Controller<span class="tsd-signature-symbol">(</span>parent<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">T</span>, options<span class="tsd-signature-symbol">?: </span><a href="../interfaces/iabstracttransitioncontrolleroptions.html" class="tsd-signature-type">IAbstractTransitionControllerOptions</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="abstracttransitioncontroller.html" class="tsd-signature-type">AbstractTransitionController</a></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<p>Overrides EventDispatcher.__constructor</p>
<ul>
<li>Defined in <a href="https://github.com/larsvanbraam/transition-controller/blob/402a1b3/src/lib/AbstractTransitionController.ts#L143">AbstractTransitionController.ts:143</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>The constructor initiates the class, it merges the default options with the
provided options and creates the transition timelines.</p>
</div>
<p><strong>Note:</strong> Keep in mind that the moment the transition controller is constructed
it also calls the init method that triggers the methods to setup the timelines.
So always cconstruct the transition controller after your component is ready.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>parent: <span class="tsd-signature-type">T</span></h5>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>The reference to the parent instance</p>
</div>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagDefault value">Default value</span> options: <a href="../interfaces/iabstracttransitioncontrolleroptions.html" class="tsd-signature-type">IAbstractTransitionControllerOptions</a><span class="tsd-signature-symbol"> = {}</span></h5>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>The configuration object for the transition controller</p>
</div>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <a href="abstracttransitioncontroller.html" class="tsd-signature-type">AbstractTransitionController</a></h4>
</li>
</ul>
</section>
</section>
<section class="tsd-panel-group tsd-member-group ">
<h2>Properties</h2>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class">
<a name="ishidden" class="tsd-anchor"></a>
<h3>is<wbr>Hidden</h3>
<div class="tsd-signature tsd-kind-icon">is<wbr>Hidden<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> = true</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/larsvanbraam/transition-controller/blob/402a1b3/src/lib/AbstractTransitionController.ts#L55">AbstractTransitionController.ts:55</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>The isHidden property gives you the current transition state of the
component. A component is either hidden or not.</p>
</div>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class tsd-is-inherited tsd-is-protected">
<a name="listeners" class="tsd-anchor"></a>
<h3><span class="tsd-flag ts-flagProtected">Protected</span> listeners</h3>
<div class="tsd-signature tsd-kind-icon">listeners<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">EventListenerMap</span><span class="tsd-signature-symbol"><</span><a href="transitionevent.html" class="tsd-signature-type">TransitionEvent</a><span class="tsd-signature-symbol">></span></div>
<aside class="tsd-sources">
<p>Inherited from EventDispatcher.listeners</p>
<ul>
<li>Defined in /Users/lars/Projects/_private/modules/transition-controller/node_modules/seng-event/lib/EventDispatcher.d.ts:33</li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>An object containing all event listeners by [[AbstractEvent.type|event type]]. Each value
on this object is an Array of [[EventListenerData]] objects for each event listener
added with that type.</p>
</div>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class">
<a name="loopinganimationstarted" class="tsd-anchor"></a>
<h3>looping<wbr>Animation<wbr>Started</h3>
<div class="tsd-signature tsd-kind-icon">looping<wbr>Animation<wbr>Started<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> = false</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/larsvanbraam/transition-controller/blob/402a1b3/src/lib/AbstractTransitionController.ts#L63">AbstractTransitionController.ts:63</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>The loopingAnimationStarted property gives you the current looping
transition state of the component a looping animation is either running or not.</p>
</div>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class">
<a name="loopinganimationtimeline" class="tsd-anchor"></a>
<h3>looping<wbr>Animation<wbr>Timeline</h3>
<div class="tsd-signature tsd-kind-icon">looping<wbr>Animation<wbr>Timeline<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">TimelineMax</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/larsvanbraam/transition-controller/blob/402a1b3/src/lib/AbstractTransitionController.ts#L87">AbstractTransitionController.ts:87</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>The loopingAnimationTimeline property is the timeline that is used for the looping
animations inside of a component. The timeline configuration is setup to loop until pause is called.</p>
</div>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class tsd-is-inherited">
<a name="parent" class="tsd-anchor"></a>
<h3>parent</h3>
<div class="tsd-signature tsd-kind-icon">parent<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">EventDispatcher</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></div>
<aside class="tsd-sources">
<p>Inherited from EventDispatcher.parent</p>
<ul>
<li>Defined in /Users/lars/Projects/_private/modules/transition-controller/node_modules/seng-event/lib/EventDispatcher.d.ts:27</li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>The parent EventDispatcher instance. If this instance has no parent, this value will be
set to <code>null</code>. The parent is used in the bubbling and capturing phases of events.</p>
</div>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="abstracttransitioncontroller.html#dispatchevent">dispatchEvent</a> for more information on the bubbling and capturing chain</p>
</dd>
</dl>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class">
<a name="parentcontroller" class="tsd-anchor"></a>
<h3>parent<wbr>Controller</h3>
<div class="tsd-signature tsd-kind-icon">parent<wbr>Controller<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">T</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/larsvanbraam/transition-controller/blob/402a1b3/src/lib/AbstractTransitionController.ts#L47">AbstractTransitionController.ts:47</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>The parentController gives you access to the class that constructed the
transition controller. You might need this if you want to access elements
from the parentController. For example in a Vue.js project you might want
to access the <strong>$refs</strong> of you Vue.js component to setup your animations.</p>
</div>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class tsd-is-inherited tsd-is-protected">
<a name="target" class="tsd-anchor"></a>
<h3><span class="tsd-flag ts-flagProtected">Protected</span> target</h3>
<div class="tsd-signature tsd-kind-icon">target<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">EventDispatcher</span></div>
<aside class="tsd-sources">
<p>Inherited from EventDispatcher.target</p>
<ul>
<li>Defined in /Users/lars/Projects/_private/modules/transition-controller/node_modules/seng-event/lib/EventDispatcher.d.ts:38</li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>The value that will be set as [[AbstractEvent.target|target]] on events that are dispatched
by this EventDispatcher instance. Set to the value passed to the constructor</p>
</div>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class">
<a name="transitionintimeline" class="tsd-anchor"></a>
<h3>transition<wbr>InTimeline</h3>
<div class="tsd-signature tsd-kind-icon">transition<wbr>InTimeline<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">TimelineMax</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/larsvanbraam/transition-controller/blob/402a1b3/src/lib/AbstractTransitionController.ts#L71">AbstractTransitionController.ts:71</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>The transitionInTimeline property is the timeline that is used for the in animation
of the component.</p>
</div>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class">
<a name="transitionouttimeline" class="tsd-anchor"></a>
<h3>transition<wbr>Out<wbr>Timeline</h3>
<div class="tsd-signature tsd-kind-icon">transition<wbr>Out<wbr>Timeline<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">TimelineMax</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/larsvanbraam/transition-controller/blob/402a1b3/src/lib/AbstractTransitionController.ts#L79">AbstractTransitionController.ts:79</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>The transitionOutTimeline property is the timeline that is used for the out
animation of the component.</p>
</div>
</div>
</section>
</section>
<section class="tsd-panel-group tsd-member-group ">
<h2>Methods</h2>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter tsd-is-inherited">
<a name="addeventlistener" class="tsd-anchor"></a>
<h3>add<wbr>Event<wbr>Listener</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter tsd-is-inherited">
<li class="tsd-signature tsd-kind-icon">add<wbr>Event<wbr>Listener<TType><span class="tsd-signature-symbol">(</span>eventType<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">TType</span>, handler<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EventHandlerForEvent</span><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">ExtractEventOfType</span><span class="tsd-signature-symbol"><</span><a href="transitionevent.html" class="tsd-signature-type">TransitionEvent</a><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">TType</span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">></span>, useCapture<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span>, priority<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EventListenerData</span><span class="tsd-signature-symbol"><</span><a href="transitionevent.html" class="tsd-signature-type">TransitionEvent</a><span class="tsd-signature-symbol">></span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<p>Inherited from EventDispatcher.addEventListener</p>
<ul>
<li>Defined in /Users/lars/Projects/_private/modules/transition-controller/node_modules/seng-event/lib/EventDispatcher.d.ts:118</li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Adds a new event listener. The given handler function will be called in the following cases:</p>
<ul>
<li>An event with a [[AbstractEvent.type|type]] that is equal to the given <code>eventType</code> is dispatched
on this EventDispatcher instance.</li>
<li>An event with a [[AbstractEvent.type|type]] that is equal to the given <code>eventType</code> is dispatched
on a child EventDispatcher, and the <code>useCapture</code> parameter is set to <code>true</code></li>
<li>An event with [[AbstractEvent.bubbles|bubbles]] set to <code>true</code> and a [[AbstractEvent.type|type]] that
is equal to the given <code>eventType</code> is dispatched on a child EventDispatcher, and the
<code>useCapture</code> parameter is set to <code>false</code></li>
</ul>
</div>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="abstracttransitioncontroller.html#dispatchevent">dispatchEvent</a> for more info on the which event listeners are called during
capturing and bubbling</p>
</dd>
</dl>
</div>
<h4 class="tsd-type-parameters-title">Type parameters</h4>
<ul class="tsd-type-parameters">
<li>
<h4>TType<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">TypesForEvent</span><span class="tsd-signature-symbol"><</span><a href="transitionevent.html" class="tsd-signature-type">TransitionEvent</a><span class="tsd-signature-symbol">></span></h4>
</li>
</ul>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>eventType: <span class="tsd-signature-type">TType</span></h5>
<div class="tsd-comment tsd-typography">
<p>The eventType to listen for</p>
</div>
</li>
<li>
<h5>handler: <span class="tsd-signature-type">EventHandlerForEvent</span><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">ExtractEventOfType</span><span class="tsd-signature-symbol"><</span><a href="transitionevent.html" class="tsd-signature-type">TransitionEvent</a><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">TType</span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">></span></h5>
<div class="tsd-comment tsd-typography">
<p>The handler function that will be called when a matching event is dispatched.
This function will retrieve the dispatched [[AbstractEvent|event]] as a parameter</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> useCapture: <span class="tsd-signature-type">boolean</span></h5>
<div class="tsd-comment tsd-typography">
<p>Indicates if this handler should be called during the capturing phase
of an event chain. If and only if this is set to <code>false</code> will this handler be called
during the bubbling phase of an event chain.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> priority: <span class="tsd-signature-type">number</span></h5>
<div class="tsd-comment tsd-typography">
<p>A number that indicates the priority of this event listener relative
to other event listeners of the same type on this EventDispatcher instance. A higher number
indicates that this listener will be called earlier.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">EventListenerData</span><span class="tsd-signature-symbol"><</span><a href="transitionevent.html" class="tsd-signature-type">TransitionEvent</a><span class="tsd-signature-symbol">></span></h4>
<p>An object describing the listener that has a [[EventListenerData.dispose|dispose()]]
method to remove the listener.</p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-inherited">
<a name="dispatchevent" class="tsd-anchor"></a>
<h3>dispatch<wbr>Event</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-inherited">
<li class="tsd-signature tsd-kind-icon">dispatch<wbr>Event<span class="tsd-signature-symbol">(</span>event<span class="tsd-signature-symbol">: </span><a href="transitionevent.html" class="tsd-signature-type">TransitionEvent</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<p>Inherited from EventDispatcher.dispatchEvent</p>
<ul>
<li>Defined in /Users/lars/Projects/_private/modules/transition-controller/node_modules/seng-event/lib/EventDispatcher.d.ts:93</li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Dispatches the given event. The dispatch consists of three phases:</p>
<ol>
<li>The capture phase. We walk through all ancestors of this EventDispatcher, with the
top-most instance first and the direct parent of this EventDispatcher last. On each
ancestor, we call all event handlers that are added with the <code>useCapture</code> argument
set to <code>true</code> and the <code>eventType</code> set to the same [[AbstractEvent.type|type]] as
the given event.
If this EventDispatcher has no parent, this phase will be skipped.</li>
<li>The target phase. In this phase we call all event handlers on this EventDispatcher
instance that listen for the same [[AbstractEvent.type|type]] as the given event.</li>
<li>The bubbling phase. This phase will only be executed if the given event has the
[[AbstractEvent.bubbles|bubbles]] property set to <code>true</code>. If so, we will again walk through
all ancestors of this EventDispatcher, but in the reverse order: the direct parent
of this instance first and the top-most parent last. On every ancestor, we will call
all event handlers that are added with the <code>useCapture</code> argument set to <code>false</code> and the
<code>eventType</code> set to the same [[AbstractEvent.type|type]] as the given event.</li>
</ol>
</div>
<p>If any of the event handlers call [[AbstractEvent.stopPropagation|stopPropagation()]], we will
skip all event handlers that occur on a target later in the event chain. If an event handler
calls [[AbstractEvent.stopImmediatePropagation|stopImmediatePropagation()]], we will also skip
any event handlers on the same target in the event chain.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>event: <a href="transitionevent.html" class="tsd-signature-type">TransitionEvent</a></h5>
<div class="tsd-comment tsd-typography">
<p>The event to dispatch</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4>
<p>If one of the handlers that have been called during this dispatch
called [[AbstractEvent.preventDefault|event.preventDefault()]], this method will return <code>false</code>.
If no handlers have been called or none of the handlers have called
[[AbstractEvent.preventDefault|event.preventDefault()]], this method will return <code>true</code>.</p>
<blockquote>
<p>Please note: [[AbstractEvent.preventDefault|preventDefault()]] can only be called on
events that have their [[AbstractEvent.cancelable|cancelable]] property set to <code>true</code></p>
</blockquote>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-overwrite">
<a name="dispose" class="tsd-anchor"></a>
<h3>dispose</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-overwrite">
<li class="tsd-signature tsd-kind-icon">dispose<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<p>Overrides EventDispatcher.dispose</p>
<ul>
<li>Defined in <a href="https://github.com/larsvanbraam/transition-controller/blob/402a1b3/src/lib/AbstractTransitionController.ts#L722">AbstractTransitionController.ts:722</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Because Vue destructs the VM instance before it removes the DOM node we want to finish the
transition out before actually cleaning everything</p>
</div>
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-protected">
<a name="getcomponent" class="tsd-anchor"></a>
<h3><span class="tsd-flag ts-flagProtected">Protected</span> <span class="tsd-flag ts-flagAbstract">Abstract</span> get<wbr>Component</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-protected">
<li class="tsd-signature tsd-kind-icon">get<wbr>Component<span class="tsd-signature-symbol">(</span>component<span class="tsd-signature-symbol">: </span><a href="../index.html#componentselector" class="tsd-signature-type">ComponentSelector</a><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">T</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/larsvanbraam/transition-controller/blob/402a1b3/src/lib/AbstractTransitionController.ts#L571">AbstractTransitionController.ts:571</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Method that should be created based on your framework. It retrieves a
component based on a string, HTMLElement or the generic</p>
</div>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>component: <a href="../index.html#componentselector" class="tsd-signature-type">ComponentSelector</a><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">></span></h5>
<div class="tsd-comment tsd-typography">
<p>The reference to the component</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">T</span></h4>
<p>The instance of the component that is requested</p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="gettimeline" class="tsd-anchor"></a>
<h3>get<wbr>Timeline</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">get<wbr>Timeline<span class="tsd-signature-symbol">(</span>component<span class="tsd-signature-symbol">: </span><a href="../index.html#componentselector" class="tsd-signature-type">ComponentSelector</a><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">></span>, direction<span class="tsd-signature-symbol">?: </span><a href="../enums/transitiondirection.html" class="tsd-signature-type">TransitionDirection</a>, reset<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span>, id<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Animation</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/larsvanbraam/transition-controller/blob/402a1b3/src/lib/AbstractTransitionController.ts#L402">AbstractTransitionController.ts:402</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>When nesting transition components you might want to nest the timelines
as well, this makes it easier to time all the component transitions. Keep
in mind that the getTimeline method returns a clone of the original timeline.</p>
</div>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>component: <a href="../index.html#componentselector" class="tsd-signature-type">ComponentSelector</a><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">></span></h5>
<div class="tsd-comment tsd-typography">
<p>The selector for the component that you want the timeline for</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagDefault value">Default value</span> direction: <a href="../enums/transitiondirection.html" class="tsd-signature-type">TransitionDirection</a><span class="tsd-signature-symbol"> = TransitionDirection.IN</span></h5>
<div class="tsd-comment tsd-typography">
<p>The direction of the timeline that you want</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagDefault value">Default value</span> reset: <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> = false</span></h5>
<div class="tsd-comment tsd-typography">
<p>This flag determines if we reset the existing timeline or re-create it from scratch</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> id: <span class="tsd-signature-type">string</span></h5>
<div class="tsd-comment tsd-typography">
<p>This is the id of the timeline that we are requesting</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">Animation</span></h4>
<p>The timeline that is retrieved</p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="gettimelinedurationforcomponent" class="tsd-anchor"></a>
<h3>get<wbr>Timeline<wbr>Duration<wbr>For<wbr>Component</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">get<wbr>Timeline<wbr>Duration<wbr>For<wbr>Component<span class="tsd-signature-symbol">(</span>component<span class="tsd-signature-symbol">: </span><a href="../index.html#componentselector" class="tsd-signature-type">ComponentSelector</a><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">></span>, direction<span class="tsd-signature-symbol">?: </span><a href="../enums/transitiondirection.html" class="tsd-signature-type">TransitionDirection</a>, reset<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span>, id<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/larsvanbraam/transition-controller/blob/402a1b3/src/lib/AbstractTransitionController.ts#L422">AbstractTransitionController.ts:422</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>component: <a href="../index.html#componentselector" class="tsd-signature-type">ComponentSelector</a><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">></span></h5>
<div class="tsd-comment tsd-typography">
<p>The selector for the component that you want to get the timeline for</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagDefault value">Default value</span> direction: <a href="../enums/transitiondirection.html" class="tsd-signature-type">TransitionDirection</a><span class="tsd-signature-symbol"> = TransitionDirection.IN</span></h5>
<div class="tsd-comment tsd-typography">
<p>The direction that you want to check for</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagDefault value">Default value</span> reset: <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> = false</span></h5>
<div class="tsd-comment tsd-typography">
<p>This flag determines if we reset the existing timeline or re-create it from scratch</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> id: <span class="tsd-signature-type">string</span></h5>
<div class="tsd-comment tsd-typography">
<p>This is the id of the timeline that we are requesting</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">number</span></h4>
<p>The duration of the timeline</p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter tsd-is-inherited">
<a name="haseventlistener" class="tsd-anchor"></a>
<h3>has<wbr>Event<wbr>Listener</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter tsd-is-inherited">
<li class="tsd-signature tsd-kind-icon">has<wbr>Event<wbr>Listener<TType><span class="tsd-signature-symbol">(</span>eventType<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">TType</span>, handler<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">EventHandlerForEvent</span><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">ExtractEventOfType</span><span class="tsd-signature-symbol"><</span><a href="transitionevent.html" class="tsd-signature-type">TransitionEvent</a><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">TType</span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">></span>, useCapture<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<p>Inherited from EventDispatcher.hasEventListener</p>
<ul>
<li>Defined in /Users/lars/Projects/_private/modules/transition-controller/node_modules/seng-event/lib/EventDispatcher.d.ts:130</li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Checks if an event listener matching the given parameters exists on this EventDispatcher
instance.</p>
</div>
</div>
<h4 class="tsd-type-parameters-title">Type parameters</h4>
<ul class="tsd-type-parameters">
<li>
<h4>TType<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">TypesForEvent</span><span class="tsd-signature-symbol"><</span><a href="transitionevent.html" class="tsd-signature-type">TransitionEvent</a><span class="tsd-signature-symbol">></span></h4>
</li>
</ul>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>eventType: <span class="tsd-signature-type">TType</span></h5>
<div class="tsd-comment tsd-typography">
<p>Will only look for event listeners with this <code>eventType</code></p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> handler: <span class="tsd-signature-type">EventHandlerForEvent</span><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">ExtractEventOfType</span><span class="tsd-signature-symbol"><</span><a href="transitionevent.html" class="tsd-signature-type">TransitionEvent</a><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">TType</span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">></span></h5>
<div class="tsd-comment tsd-typography">
<p>If set, will only match event listeners that have the same handler function</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> useCapture: <span class="tsd-signature-type">boolean</span></h5>
<div class="tsd-comment tsd-typography">
<p>If set, will only match event listeners that have the same <code>useCapture</code>
argument.</p>
<blockquote>
<p>Please note: if no <code>useCapture</code> argument was provided to <a href="abstracttransitioncontroller.html#addeventlistener">addEventListener</a>, it
is set to <code>false</code> by default</p>
</blockquote>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4>
<p>True if one or more event listeners exist</p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-protected">
<a name="init" class="tsd-anchor"></a>
<h3><span class="tsd-flag ts-flagProtected">Protected</span> init</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-protected">
<li class="tsd-signature tsd-kind-icon">init<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/larsvanbraam/transition-controller/blob/402a1b3/src/lib/AbstractTransitionController.ts#L517">AbstractTransitionController.ts:517</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>This method will be used for setting up the timelines for the component</p>
</div>
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-inherited">
<a name="isdisposed" class="tsd-anchor"></a>
<h3>is<wbr>Disposed</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-inherited">
<li class="tsd-signature tsd-kind-icon">is<wbr>Disposed<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<p>Inherited from Disposable.isDisposed</p>
<ul>
<li>Defined in /Users/lars/Projects/_private/modules/transition-controller/node_modules/seng-disposable/lib/Disposable.d.ts:8</li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>After <a href="abstracttransitioncontroller.html#dispose">dispose</a> has been called, this method returns true.
Use this method to determine whether dispose() should be run again.</p>
</div>
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-inherited tsd-is-protected">
<a name="listenersorter" class="tsd-anchor"></a>
<h3><span class="tsd-flag ts-flagProtected">Protected</span> listener<wbr>Sorter</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-inherited tsd-is-protected">
<li class="tsd-signature tsd-kind-icon">listener<wbr>Sorter<span class="tsd-signature-symbol">(</span>e1<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EventListenerData</span>, e2<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EventListenerData</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<p>Inherited from EventDispatcher.listenerSorter</p>
<ul>
<li>Defined in /Users/lars/Projects/_private/modules/transition-controller/node_modules/seng-event/lib/EventDispatcher.d.ts:174</li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Method that is used to sort arrays of event listeners based on their [[EventListenerData.priority|priority]]
property. Higher priority will be sorted before lower priority values.</p>
</div>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>e1: <span class="tsd-signature-type">EventListenerData</span></h5>
<div class="tsd-comment tsd-typography">
<p>The first event listener to compare</p>
</div>
</li>
<li>
<h5>e2: <span class="tsd-signature-type">EventListenerData</span></h5>
<div class="tsd-comment tsd-typography">
<p>The other event listener to compare to</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">number</span></h4>
<p>A number that indicates the sorting according to the JS sort() method.</p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-inherited">
<a name="removealleventlisteners" class="tsd-anchor"></a>
<h3>remove<wbr>All<wbr>Event<wbr>Listeners</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-inherited">
<li class="tsd-signature tsd-kind-icon">remove<wbr>All<wbr>Event<wbr>Listeners<span class="tsd-signature-symbol">(</span>eventType<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">TypesForEvent</span><span class="tsd-signature-symbol"><</span><a href="transitionevent.html" class="tsd-signature-type">TransitionEvent</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<p>Inherited from EventDispatcher.removeAllEventListeners</p>
<ul>
<li>Defined in /Users/lars/Projects/_private/modules/transition-controller/node_modules/seng-event/lib/EventDispatcher.d.ts:161</li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Removes all event listeners that have a [[AbstractEvent.type|type]] of the given <code>eventType</code>
from this EventDispatcher instance, regardless of their [[EventListenerData.handler|handler]] or
[[EventListenerData.useCapture|useCapture]] property.</p>
</div>
<p><em>Please note: if you remove an event listener during the dispatch of an event it will
not be called anymore, even if it was supposed to be called in the same event chain</em></p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> eventType: <span class="tsd-signature-type">TypesForEvent</span><span class="tsd-signature-symbol"><</span><a href="transitionevent.html" class="tsd-signature-type">TransitionEvent</a><span class="tsd-signature-symbol">></span></h5>
<div class="tsd-comment tsd-typography">
<p>The [[AbstractEvent.type|type]] of event to remove. If not provided, all event listeners
will be removed regardless of their type.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter tsd-is-inherited">
<a name="removeeventlistener" class="tsd-anchor"></a>
<h3>remove<wbr>Event<wbr>Listener</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter tsd-is-inherited">
<li class="tsd-signature tsd-kind-icon">remove<wbr>Event<wbr>Listener<TType><span class="tsd-signature-symbol">(</span>eventType<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">TType</span>, handler<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EventHandlerForEvent</span><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">></span>, useCapture<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<p>Inherited from EventDispatcher.removeEventListener</p>
<ul>
<li>Defined in /Users/lars/Projects/_private/modules/transition-controller/node_modules/seng-event/lib/EventDispatcher.d.ts:150</li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Removes all event listeners that match the given parameters from this EventDispatcher
instance.</p>
</div>
<p><em>Please note: if you remove an event listener during the dispatch of an event it will
not be called anymore, even if it was supposed to be called in the same event chain</em></p>
</div>
<h4 class="tsd-type-parameters-title">Type parameters</h4>
<ul class="tsd-type-parameters">
<li>
<h4>TType<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">TypesForEvent</span><span class="tsd-signature-symbol"><</span><a href="transitionevent.html" class="tsd-signature-type">TransitionEvent</a><span class="tsd-signature-symbol">></span></h4>
</li>
</ul>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>eventType: <span class="tsd-signature-type">TType</span></h5>
<div class="tsd-comment tsd-typography">
<p>Only event listeners of that have this <code>eventType</code> are removed</p>
</div>
</li>
<li>
<h5>handler: <span class="tsd-signature-type">EventHandlerForEvent</span><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">></span></h5>
<div class="tsd-comment tsd-typography">
<p>Only event listeners that have this handler function will be removed</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> useCapture: <span class="tsd-signature-type">boolean</span></h5>
<div class="tsd-comment tsd-typography">
<p>Only event listeners that have been added with the same <code>useCapture</code>
parameter will be removed. <em>Please note: if no useCapture argument is provided, only
event listeners that have useCapture set to false will be removed.</em></p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="resettimeline" class="tsd-anchor"></a>
<h3>reset<wbr>Timeline</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">reset<wbr>Timeline<span class="tsd-signature-symbol">(</span>type<span class="tsd-signature-symbol">: </span><a href="../enums/timelinetype.html" class="tsd-signature-type">TimelineType</a>, children<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Array</span><span class="tsd-signature-symbol"><</span><a href="../index.html#componentselector" class="tsd-signature-type">ComponentSelector</a><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol"> | </span><a href="../interfaces/childcomponentselector.html" class="tsd-signature-type">ChildComponentSelector</a><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/larsvanbraam/transition-controller/blob/402a1b3/src/lib/AbstractTransitionController.ts#L487">AbstractTransitionController.ts:487</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-comment-tags">
<dt>method</dt>
<dd><p>resetTimeline</p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>type: <a href="../enums/timelinetype.html" class="tsd-signature-type">TimelineType</a></h5>
</li>
<li>
<h5><span class="tsd-flag ts-flagDefault value">Default value</span> children: <span class="tsd-signature-type">Array</span><span class="tsd-signature-symbol"><</span><a href="../index.html#componentselector" class="tsd-signature-type">ComponentSelector</a><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol"> | </span><a href="../interfaces/childcomponentselector.html" class="tsd-signature-type">ChildComponentSelector</a><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol"> = []</span></h5>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-protected">
<a name="setuploopinganimationtimeline" class="tsd-anchor"></a>
<h3><span class="tsd-flag ts-flagProtected">Protected</span> <span class="tsd-flag ts-flagAbstract">Abstract</span> setup<wbr>Looping<wbr>Animation<wbr>Timeline</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-protected">
<li class="tsd-signature tsd-kind-icon">setup<wbr>Looping<wbr>Animation<wbr>Timeline<span class="tsd-signature-symbol">(</span>timeline<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">TimelineMax</span>, parent<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">T</span>, id<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/larsvanbraam/transition-controller/blob/402a1b3/src/lib/AbstractTransitionController.ts#L552">AbstractTransitionController.ts:552</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>This method is actually set's up the looping timeline. it should contain all
the animations that are required for looping.</p>
</div>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>timeline: <span class="tsd-signature-type">TimelineMax</span></h5>
<div class="tsd-comment tsd-typography">
<p>The reference to the looping timeline</p>
</div>
</li>
<li>
<h5>parent: <span class="tsd-signature-type">T</span></h5>
<div class="tsd-comment tsd-typography">
<p>The reference to the parent instance</p>
</div>
</li>
<li>
<h5>id: <span class="tsd-signature-type">string</span></h5>
<div class="tsd-comment tsd-typography">
<p>The id of the looping animation that should be initialized</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="setuptimeline" class="tsd-anchor"></a>
<h3>setup<wbr>Timeline</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">setup<wbr>Timeline<span class="tsd-signature-symbol">(</span>type<span class="tsd-signature-symbol">: </span><a href="../enums/timelinetype.html" class="tsd-signature-type">TimelineType</a>, reset<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span>, id<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/larsvanbraam/transition-controller/blob/402a1b3/src/lib/AbstractTransitionController.ts#L439">AbstractTransitionController.ts:439</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Setup timeline is a wrapper method that calls the correct setup methods and clears any old timelines if necessary</p>
</div>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>type: <a href="../enums/timelinetype.html" class="tsd-signature-type">TimelineType</a></h5>
<div class="tsd-comment tsd-typography">
<p>This is the type of timeline that will be initialized.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagDefault value">Default value</span> reset: <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> = true</span></h5>
<div class="tsd-comment tsd-typography">
<p>This means the timeline will be cleared before initializing</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> id: <span class="tsd-signature-type">string</span></h5>
<div class="tsd-comment tsd-typography">
<p>This is the id of the timeline that should be initialized.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-protected">
<a name="setuptransitionintimeline" class="tsd-anchor"></a>
<h3><span class="tsd-flag ts-flagProtected">Protected</span> <span class="tsd-flag ts-flagAbstract">Abstract</span> setup<wbr>Transition<wbr>InTimeline</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-protected">
<li class="tsd-signature tsd-kind-icon">setup<wbr>Transition<wbr>InTimeline<span class="tsd-signature-symbol">(</span>timeline<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">TimelineMax</span>, parent<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">T</span>, id<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/larsvanbraam/transition-controller/blob/402a1b3/src/lib/AbstractTransitionController.ts#L542">AbstractTransitionController.ts:542</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>This method is actually set's up the transition in timeline. it should contain all
the animations that are required for the transition in to done.</p>
</div>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>timeline: <span class="tsd-signature-type">TimelineMax</span></h5>
<div class="tsd-comment tsd-typography">
<p>The reference to the transition in timeline</p>
</div>
</li>
<li>
<h5>parent: <span class="tsd-signature-type">T</span></h5>
<div class="tsd-comment tsd-typography">
<p>The reference to the parent instance</p>
</div>
</li>
<li>
<h5>id: <span class="tsd-signature-type">string</span></h5>
<div class="tsd-comment tsd-typography">
<p>The id of the transition in timeline that should be initialized</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-protected">
<a name="setuptransitionouttimeline" class="tsd-anchor"></a>
<h3><span class="tsd-flag ts-flagProtected">Protected</span> <span class="tsd-flag ts-flagAbstract">Abstract</span> setup<wbr>Transition<wbr>Out<wbr>Timeline</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-protected">
<li class="tsd-signature tsd-kind-icon">setup<wbr>Transition<wbr>Out<wbr>Timeline<span class="tsd-signature-symbol">(</span>timeline<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">TimelineMax</span>, parent<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">T</span>, id<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/larsvanbraam/transition-controller/blob/402a1b3/src/lib/AbstractTransitionController.ts#L531">AbstractTransitionController.ts:531</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>This method is actually set's up the transition out timeline. it should contain all
the animations that are required for the transition out to done.</p>
</div>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>timeline: <span class="tsd-signature-type">TimelineMax</span></h5>
<div class="tsd-comment tsd-typography">
<p>The reference to the transition out timeline</p>
</div>
</li>
<li>
<h5>parent: <span class="tsd-signature-type">T</span></h5>
<div class="tsd-comment tsd-typography">
<p>The reference to the parent instance</p>
</div>
</li>
<li>
<h5>id: <span class="tsd-signature-type">string</span></h5>
<div class="tsd-comment tsd-typography">
<p>The id of the transition out timeline that should be initialized</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="startloopinganimation" class="tsd-anchor"></a>
<h3>start<wbr>Looping<wbr>Animation</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">start<wbr>Looping<wbr>Animation<span class="tsd-signature-symbol">(</span>id<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span>, reset<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/larsvanbraam/transition-controller/blob/402a1b3/src/lib/AbstractTransitionController.ts#L374">AbstractTransitionController.ts:374</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>This method is pretty straightforward will start the loopingAnimationTimeline.</p>
</div>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5><span class="tsd-flag ts-flagDefault value">Default value</span> id: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> = this.options.loopId</span></h5>
<div class="tsd-comment tsd-typography">
<p>This is the id of the timeline that you want to start</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagDefault value">Default value</span> reset: <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> = false</span></h5>
<div class="tsd-comment tsd-typography">
<p>This means that the timeline will be re-initialized.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="stoploopinganimation" class="tsd-anchor"></a>
<h3>stop<wbr>Looping<wbr>Animation</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">stop<wbr>Looping<wbr>Animation<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/larsvanbraam/transition-controller/blob/402a1b3/src/lib/AbstractTransitionController.ts#L385">AbstractTransitionController.ts:385</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>This method is pretty straightforward will stop the loopingAnimationTimeline.</p>
</div>
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="transitionin" class="tsd-anchor"></a>
<h3>transition<wbr>In</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">transition<wbr>In<span class="tsd-signature-symbol">(</span>forceTransition<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">></span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/larsvanbraam/transition-controller/blob/402a1b3/src/lib/AbstractTransitionController.ts#L179">AbstractTransitionController.ts:179</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>The transitionIn method restarts the transitionInTimeline and returns
a promise to let you know that is is done with the animation. By default the
transition in will wait for any old transitionOut that is still running. If
you want to force your transition in and kill any running transitionOut animations
you should set the forceTransition flag to true when calling the transitionIn method.</p>
</div>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5><span class="tsd-flag ts-flagDefault value">Default value</span> forceTransition: <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> = false</span></h5>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">></span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="transitionout" class="tsd-anchor"></a>
<h3>transition<wbr>Out</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">transition<wbr>Out<span class="tsd-signature-symbol">(</span>forceTransition<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span>, id<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span>, reset<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">></span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/larsvanbraam/transition-controller/blob/402a1b3/src/lib/AbstractTransitionController.ts#L281">AbstractTransitionController.ts:281</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>/**
The transitionOut method will look if the transitionOutTimeline has any
animations added to it. If no animations were added it will reverse the
transitionInTimeline. Otherwise it will restart the transitionOutTimeline.</p>
</div>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5><span class="tsd-flag ts-flagDefault value">Default value</span> forceTransition: <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> = false</span></h5>
<div class="tsd-comment tsd-typography">
<p>Forcing a transition means that the old transition out will be stopped!</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagDefault value">Default value</span> id: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> = this.options.transitionOutId</span></h5>
<div class="tsd-comment tsd-typography">
<p>This is the id of the transition out timeline that you want to trigger</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagDefault value">Default value</span> reset: <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> = false</span></h5>
<div class="tsd-comment tsd-typography">
<p>This means that the transition out timeline will be re-initialized.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">></span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-inherited">
<a name="willtrigger" class="tsd-anchor"></a>
<h3>will<wbr>Trigger</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-inherited">
<li class="tsd-signature tsd-kind-icon">will<wbr>Trigger<span class="tsd-signature-symbol">(</span>eventType<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">TypesForEvent</span><span class="tsd-signature-symbol"><</span><a href="transitionevent.html" class="tsd-signature-type">TransitionEvent</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<p>Inherited from EventDispatcher.willTrigger</p>
<ul>
<li>Defined in /Users/lars/Projects/_private/modules/transition-controller/node_modules/seng-event/lib/EventDispatcher.d.ts:137</li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Checks if an event listener with a [[EventListenerData.type|type]] of the given <code>eventType</code> exists
on this EventDispatcher or any ancestor EventDispatcher instance.</p>
</div>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>eventType: <span class="tsd-signature-type">TypesForEvent</span><span class="tsd-signature-symbol"><</span><a href="transitionevent.html" class="tsd-signature-type">TransitionEvent</a><span class="tsd-signature-symbol">></span></h5>
<div class="tsd-comment tsd-typography">
<p>The event type to check for</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4>
<p><code>true</code> if a matching listener is found</p>
</li>
</ul>
</section>
</section>
</div>
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
<nav class="tsd-navigation primary">
<ul>
<li class="globals ">
<a href="../index.html"><em>Globals</em></a>
</li>
</ul>
</nav>
<nav class="tsd-navigation secondary menu-sticky">
<ul class="before-current">
<li class=" tsd-kind-enum">
<a href="../enums/timelinetype.html" class="tsd-kind-icon">Timeline<wbr>Type</a>
</li>
<li class=" tsd-kind-enum">
<a href="../enums/transitiondirection.html" class="tsd-kind-icon">Transition<wbr>Direction</a>
</li>
</ul>
<ul class="current">
<li class="current tsd-kind-class tsd-has-type-parameter">
<a href="abstracttransitioncontroller.html" class="tsd-kind-icon">Abstract<wbr>Transition<wbr>Controller</a>
<ul>
<li class=" tsd-kind-constructor tsd-parent-kind-class tsd-is-overwrite">
<a href="abstracttransitioncontroller.html#constructor" class="tsd-kind-icon">constructor</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-class">
<a href="abstracttransitioncontroller.html#ishidden" class="tsd-kind-icon">is<wbr>Hidden</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-class tsd-is-inherited tsd-is-protected">
<a href="abstracttransitioncontroller.html#listeners" class="tsd-kind-icon">listeners</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-class">
<a href="abstracttransitioncontroller.html#loopinganimationstarted" class="tsd-kind-icon">looping<wbr>Animation<wbr>Started</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-class">
<a href="abstracttransitioncontroller.html#loopinganimationtimeline" class="tsd-kind-icon">looping<wbr>Animation<wbr>Timeline</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-class tsd-is-inherited">
<a href="abstracttransitioncontroller.html#parent" class="tsd-kind-icon">parent</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-class">
<a href="abstracttransitioncontroller.html#parentcontroller" class="tsd-kind-icon">parent<wbr>Controller</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-class tsd-is-inherited tsd-is-protected">
<a href="abstracttransitioncontroller.html#target" class="tsd-kind-icon">target</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-class">
<a href="abstracttransitioncontroller.html#transitionintimeline" class="tsd-kind-icon">transition<wbr>InTimeline</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-class">
<a href="abstracttransitioncontroller.html#transitionouttimeline" class="tsd-kind-icon">transition<wbr>Out<wbr>Timeline</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter tsd-is-inherited">
<a href="abstracttransitioncontroller.html#addeventlistener" class="tsd-kind-icon">add<wbr>Event<wbr>Listener</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class tsd-is-inherited">
<a href="abstracttransitioncontroller.html#dispatchevent" class="tsd-kind-icon">dispatch<wbr>Event</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class tsd-is-overwrite">
<a href="abstracttransitioncontroller.html#dispose" class="tsd-kind-icon">dispose</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class tsd-is-protected">
<a href="abstracttransitioncontroller.html#getcomponent" class="tsd-kind-icon">get<wbr>Component</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="abstracttransitioncontroller.html#gettimeline" class="tsd-kind-icon">get<wbr>Timeline</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="abstracttransitioncontroller.html#gettimelinedurationforcomponent" class="tsd-kind-icon">get<wbr>Timeline<wbr>Duration<wbr>For<wbr>Component</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter tsd-is-inherited">
<a href="abstracttransitioncontroller.html#haseventlistener" class="tsd-kind-icon">has<wbr>Event<wbr>Listener</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class tsd-is-protected">
<a href="abstracttransitioncontroller.html#init" class="tsd-kind-icon">init</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class tsd-is-inherited">
<a href="abstracttransitioncontroller.html#isdisposed" class="tsd-kind-icon">is<wbr>Disposed</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class tsd-is-inherited tsd-is-protected">
<a href="abstracttransitioncontroller.html#listenersorter" class="tsd-kind-icon">listener<wbr>Sorter</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class tsd-is-inherited">
<a href="abstracttransitioncontroller.html#removealleventlisteners" class="tsd-kind-icon">remove<wbr>All<wbr>Event<wbr>Listeners</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter tsd-is-inherited">
<a href="abstracttransitioncontroller.html#removeeventlistener" class="tsd-kind-icon">remove<wbr>Event<wbr>Listener</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="abstracttransitioncontroller.html#resettimeline" class="tsd-kind-icon">reset<wbr>Timeline</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class tsd-is-protected">
<a href="abstracttransitioncontroller.html#setuploopinganimationtimeline" class="tsd-kind-icon">setup<wbr>Looping<wbr>Animation<wbr>Timeline</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="abstracttransitioncontroller.html#setuptimeline" class="tsd-kind-icon">setup<wbr>Timeline</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class tsd-is-protected">
<a href="abstracttransitioncontroller.html#setuptransitionintimeline" class="tsd-kind-icon">setup<wbr>Transition<wbr>InTimeline</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class tsd-is-protected">
<a href="abstracttransitioncontroller.html#setuptransitionouttimeline" class="tsd-kind-icon">setup<wbr>Transition<wbr>Out<wbr>Timeline</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="abstracttransitioncontroller.html#startloopinganimation" class="tsd-kind-icon">start<wbr>Looping<wbr>Animation</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="abstracttransitioncontroller.html#stoploopinganimation" class="tsd-kind-icon">stop<wbr>Looping<wbr>Animation</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="abstracttransitioncontroller.html#transitionin" class="tsd-kind-icon">transition<wbr>In</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="abstracttransitioncontroller.html#transitionout" class="tsd-kind-icon">transition<wbr>Out</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class tsd-is-inherited">
<a href="abstracttransitioncontroller.html#willtrigger" class="tsd-kind-icon">will<wbr>Trigger</a>
</li>
</ul>
</li>
</ul>
<ul class="after-current">
<li class=" tsd-kind-class tsd-has-type-parameter">
<a href="transitionevent.html" class="tsd-kind-icon">Transition<wbr>Event</a>
</li>
<li class=" tsd-kind-interface tsd-has-type-parameter">
<a href="../interfaces/childcomponentselector.html" class="tsd-kind-icon">Child<wbr>Component<wbr>Selector</a>
</li>
<li class=" tsd-kind-interface">
<a href="../interfaces/iabstracttransitioncontrolleroptions.html" class="tsd-kind-icon">IAbstract<wbr>Transition<wbr>Controller<wbr>Options</a>
</li>
<li class=" tsd-kind-interface">
<a href="../interfaces/icreatetimelineoptions.html" class="tsd-kind-icon">ICreate<wbr>Timeline<wbr>Options</a>
</li>
<li class=" tsd-kind-type-alias tsd-has-type-parameter">
<a href="../index.html#componentselector" class="tsd-kind-icon">Component<wbr>Selector</a>
</li>
<li class=" tsd-kind-function">
<a href="../index.html#cleartimeline" class="tsd-kind-icon">clear<wbr>Timeline</a>
</li>
<li class=" tsd-kind-function">
<a href="../index.html#clonetimeline" class="tsd-kind-icon">clone<wbr>Timeline</a>
</li>
<li class=" tsd-kind-function">
<a href="../index.html#createtimeline" class="tsd-kind-icon">create<wbr>Timeline</a>
</li>
<li class=" tsd-kind-function">
<a href="../index.html#killandcleartimeline" class="tsd-kind-icon">kill<wbr>And<wbr>Clear<wbr>Timeline</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<footer class="with-border-bottom">
<div class="container">
<h2>Legend</h2>
<div class="tsd-legend-group">
<ul class="tsd-legend">
<li class="tsd-kind-module"><span class="tsd-kind-icon">Module</span></li>
<li class="tsd-kind-object-literal"><span class="tsd-kind-icon">Object literal</span></li>
<li class="tsd-kind-variable"><span class="tsd-kind-icon">Variable</span></li>
<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
<li class="tsd-kind-function tsd-has-type-parameter"><span class="tsd-kind-icon">Function with type parameter</span></li>
<li class="tsd-kind-index-signature"><span class="tsd-kind-icon">Index signature</span></li>
<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
<li class="tsd-kind-enum-member"><span class="tsd-kind-icon">Enumeration member</span></li>
<li class="tsd-kind-property tsd-parent-kind-enum"><span class="tsd-kind-icon">Property</span></li>
<li class="tsd-kind-method tsd-parent-kind-enum"><span class="tsd-kind-icon">Method</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
<li class="tsd-kind-interface tsd-has-type-parameter"><span class="tsd-kind-icon">Interface with type parameter</span></li>
<li class="tsd-kind-constructor tsd-parent-kind-interface"><span class="tsd-kind-icon">Constructor</span></li>
<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
<li class="tsd-kind-method tsd-parent-kind-interface"><span class="tsd-kind-icon">Method</span></li>
<li class="tsd-kind-index-signature tsd-parent-kind-interface"><span class="tsd-kind-icon">Index signature</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
<li class="tsd-kind-class tsd-has-type-parameter"><span class="tsd-kind-icon">Class with type parameter</span></li>
<li class="tsd-kind-constructor tsd-parent-kind-class"><span class="tsd-kind-icon">Constructor</span></li>
<li class="tsd-kind-property tsd-parent-kind-class"><span class="tsd-kind-icon">Property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class"><span class="tsd-kind-icon">Method</span></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><span class="tsd-kind-icon">Accessor</span></li>
<li class="tsd-kind-index-signature tsd-parent-kind-class"><span class="tsd-kind-icon">Index signature</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-constructor tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited constructor</span></li>
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited method</span></li>
<li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited accessor</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected method</span></li>
<li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected accessor</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private method</span></li>
<li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private accessor</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-static"><span class="tsd-kind-icon">Static property</span></li>
<li class="tsd-kind-call-signature tsd-parent-kind-class tsd-is-static"><span class="tsd-kind-icon">Static method</span></li>
</ul>
</div>
</div>
</footer>
<div class="container tsd-generator">
<p>Generated using <a href="http://typedoc.org/" target="_blank">TypeDoc</a></p>
</div>
<div class="overlay"></div>
<script src="../assets/js/main.js"></script>
<script>if (location.protocol == 'file:') document.write('<script src="../assets/js/search.js"><' + '/script>');</script>
</body>
</html>