docs/typedoc/index.html
<!doctype html>
<html class="default no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>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>
</ul>
<h1> VueTransitionComponent</h1>
</div>
</div>
</header>
<div class="container container-main">
<div class="row">
<div class="col-8 col-content">
<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>Enumerations</h3>
<ul class="tsd-index-list">
<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>
</section>
<section class="tsd-index-section ">
<h3>Classes</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-class tsd-has-type-parameter"><a href="classes/abstracttransitioncontroller.html" class="tsd-kind-icon">Abstract<wbr>Transition<wbr>Controller</a></li>
<li class="tsd-kind-class tsd-has-type-parameter"><a href="classes/transitionevent.html" class="tsd-kind-icon">Transition<wbr>Event</a></li>
</ul>
</section>
<section class="tsd-index-section ">
<h3>Interfaces</h3>
<ul class="tsd-index-list">
<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>
</ul>
</section>
<section class="tsd-index-section ">
<h3>Type aliases</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-type-alias tsd-has-type-parameter"><a href="index.html#componentselector" class="tsd-kind-icon">Component<wbr>Selector</a></li>
</ul>
</section>
<section class="tsd-index-section ">
<h3>Functions</h3>
<ul class="tsd-index-list">
<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>
</section>
</div>
</section>
</section>
<section class="tsd-panel-group tsd-member-group ">
<h2>Type aliases</h2>
<section class="tsd-panel tsd-member tsd-kind-type-alias tsd-has-type-parameter">
<a name="componentselector" class="tsd-anchor"></a>
<h3>Component<wbr>Selector</h3>
<div class="tsd-signature tsd-kind-icon">Component<wbr>Selector<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">HTMLElement</span><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#L12">AbstractTransitionController.ts:12</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>New defined way of selecting child components</p>
</div>
</div>
</section>
</section>
<section class="tsd-panel-group tsd-member-group ">
<h2>Functions</h2>
<section class="tsd-panel tsd-member tsd-kind-function">
<a name="cleartimeline" class="tsd-anchor"></a>
<h3>clear<wbr>Timeline</h3>
<ul class="tsd-signatures tsd-kind-function">
<li class="tsd-signature tsd-kind-icon">clear<wbr>Timeline<span class="tsd-signature-symbol">(</span>timeline<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">TimelineMax</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/util/TimelineUtils.ts#L69">util/TimelineUtils.ts:69</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Sometimes you do not want to kill the timeline but only kill the inline
styling. This method accepts a timeline and it will remove all the inline styling.</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>
</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-function">
<a name="clonetimeline" class="tsd-anchor"></a>
<h3>clone<wbr>Timeline</h3>
<ul class="tsd-signatures tsd-kind-function">
<li class="tsd-signature tsd-kind-icon">clone<wbr>Timeline<span class="tsd-signature-symbol">(</span>source<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">TimelineMax</span>, direction<span class="tsd-signature-symbol">: </span><a href="enums/transitiondirection.html" class="tsd-signature-type">TransitionDirection</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">TimelineMax</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/util/TimelineUtils.ts#L93">util/TimelineUtils.ts:93</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p> When you want to clone a timeline (for example when you want to nest it within
another timeline but also still want to be able to play the original timeline
this is the method you are looking for. It will create a new TimeLineLite or
TimelineMax and re-add all the original animations and event listeners.</p>
</div>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>source: <span class="tsd-signature-type">TimelineMax</span></h5>
</li>
<li>
<h5>direction: <a href="enums/transitiondirection.html" class="tsd-signature-type">TransitionDirection</a></h5>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">TimelineMax</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-function">
<a name="createtimeline" class="tsd-anchor"></a>
<h3>create<wbr>Timeline</h3>
<ul class="tsd-signatures tsd-kind-function">
<li class="tsd-signature tsd-kind-icon">create<wbr>Timeline<span class="tsd-signature-symbol">(</span>options<span class="tsd-signature-symbol">: </span><a href="interfaces/icreatetimelineoptions.html" class="tsd-signature-type">ICreateTimelineOptions</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">TimelineMax</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/util/TimelineUtils.ts#L12">util/TimelineUtils.ts:12</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>The create timeline method creates a new TimelineLite or TimelineMax timeline</p>
</div>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>options: <a href="interfaces/icreatetimelineoptions.html" class="tsd-signature-type">ICreateTimelineOptions</a></h5>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">TimelineMax</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-function">
<a name="killandcleartimeline" class="tsd-anchor"></a>
<h3>kill<wbr>And<wbr>Clear<wbr>Timeline</h3>
<ul class="tsd-signatures tsd-kind-function">
<li class="tsd-signature tsd-kind-icon">kill<wbr>And<wbr>Clear<wbr>Timeline<span class="tsd-signature-symbol">(</span>timeline<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">TimelineMax</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/util/TimelineUtils.ts#L57">util/TimelineUtils.ts:57</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Sometimes you want to fully kill a timeline and strip all the added
inline styles. This method accepts a timeline and it will remove all
the inline styling and kill the timeline instance.</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>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</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 current ">
<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>
<li class=" tsd-kind-class tsd-has-type-parameter">
<a href="classes/abstracttransitioncontroller.html" class="tsd-kind-icon">Abstract<wbr>Transition<wbr>Controller</a>
</li>
<li class=" tsd-kind-class tsd-has-type-parameter">
<a href="classes/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>