gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
149 lines (147 loc) • 35.7 kB
HTML
<html class="default"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>AnimationTrigger | GoJS API</title><meta name="description" content="Documentation for GoJS API"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../../assets/css/style.css"/><link rel="stylesheet" href="../assets/style-tsd.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.body.classList.add(localStorage.getItem("tsd-theme") || "os")</script><header><nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary"><div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2"><div class="md:pl-4"><a class="text-white hover:text-white no-underline hover:no-underline\n font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary" href="../../index.html"><h1 class="my-0 p-1 leading-none">GoJS</h1></a></div><button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation"><svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6"><path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path><path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></button><div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20"><ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0"><li class="p-1 sm:p-0"><a class="topnav-link" href="../../learn/index.html">Learn</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="../../samples/index.html">Samples</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="../../intro/index.html">Intro</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="../../api/index.html">API</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="../../download.html">Download</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html" target="_blank" rel="noopener" id="contactBtn">Contact</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html" target="_blank" rel="noopener" id="buyBtn">Buy</a></li></ul></div></div><hr class="border-b border-gray-600 opacity-50 my-0 py-0"/></nav><div class="tsd-page-header"><div class="tsd-page-toolbar"><div class="w-full max-w-screen-xl mx-auto px-2"><div class="table-wrap"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget search no-caption">Search</label><input type="text" id="tsd-search-field"/></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">GoJS API</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"/><label class="tsd-widget" for="tsd-filter-inherited">Inherited</label></div></div><a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a></div></div></div></div></div><div class="tsd-page-title"><div class="w-full max-w-screen-xl mx-auto px-2"><div class="top-copyright"><b>GoJS</b>® Diagramming Components<br/>version 2.3.8<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a></div><div><h1>Class AnimationTrigger </h1></div></div></div></header><div class="tsd w-full max-w-screen-xl mx-auto pb-4"><div class="row px-2 w-full"><div class="col-8 col-content"><section class="tsd-panel tsd-hierarchy"><h3>Hierarchy</h3><ul class="tsd-hierarchy"><li><span class="target">AnimationTrigger</span></li></ul></section><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography">
<p>An AnimationTrigger describes how to automatically animate a property on a <a href="GraphObject.html">GraphObject</a>
when it changes value.
The target property name is a string, and all name matching is case-sensitive.</p>
<div><p>Triggers will be shared by all copies of the template's GraphObjects.
You can include AnimationTriggers in your templates just like <a href="Binding.html">Binding</a>s are included:</p>
<pre><code class="language-js"><span class="hl-5">$</span><span class="hl-2">(</span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-4">Panel</span><span class="hl-2">, </span><span class="hl-6">"Vertical"</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-0">// This trigger uses the default value of AnimationTrigger.startCondition:</span><br/><span class="hl-2"> </span><span class="hl-0">// If a transaction is ongoing and Panel.position is changed, this trigger will animate</span><br/><span class="hl-2"> </span><span class="hl-0">// all changes to Panel.position at the end of the next transaction, in one bundled Animation.</span><br/><span class="hl-2"> </span><span class="hl-0">// If no transaction is ongoing, then it will animate this value immediately.</span><br/><span class="hl-2"> </span><span class="hl-1">new</span><span class="hl-2"> </span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-5">AnimationTrigger</span><span class="hl-2">(</span><span class="hl-6">"position"</span><span class="hl-2">),</span><br/><span class="hl-2"> {</span><br/><span class="hl-2"> </span><span class="hl-0">// ... Panel properties</span><br/><span class="hl-2"> },</span><br/><span class="hl-2"> </span><span class="hl-5">$</span><span class="hl-2">(</span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-4">Shape</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-0">// Animate all changes to Shape.opacity immediately</span><br/><span class="hl-2"> </span><span class="hl-1">new</span><span class="hl-2"> </span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-5">AnimationTrigger</span><span class="hl-2">(</span><span class="hl-6">"opacity"</span><span class="hl-2">, </span><span class="hl-1">null</span><span class="hl-2">, </span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-4">AnimationTrigger</span><span class="hl-2">.</span><span class="hl-4">Immediate</span><span class="hl-2">),</span><br/><span class="hl-2"> {</span><br/><span class="hl-2"> </span><span class="hl-0">// ... Shape properties</span><br/><span class="hl-2"> }</span><br/><span class="hl-2"> )</span>
</code></pre>
<p>When the <a href="AnimationTrigger.html#startCondition">startCondition</a> is <a href="AnimationTrigger.html#static-Default">AnimationTrigger.Default</a>,
GoJS will attempt to <a href="AnimationTrigger.html#static-Bundled">AnimationTrigger.Bundled</a> or <a href="AnimationTrigger.html#static-Immediate">AnimationTrigger.Immediate</a> based on the state of the transaction.
If no transaction is ongoing, this trigger will treat the default as using <a href="AnimationTrigger.html#static-Immediate">AnimationTrigger.Immediate</a>.
Otherwise it will work as <a href="AnimationTrigger.html#static-Bundled">AnimationTrigger.Bundled</a>.</p>
<p>When the <a href="AnimationTrigger.html#startCondition">startCondition</a> is <a href="AnimationTrigger.html#static-Bundled">AnimationTrigger.Bundled</a>,
the AnimationManager will use the default animation to prepare a single Animation that begins when the current transaction has ended.
This animation may be canceled if a new transaction is started.</p>
<p>When the <a href="AnimationTrigger.html#startCondition">startCondition</a> is <a href="AnimationTrigger.html#static-Immediate">AnimationTrigger.Immediate</a>,
a new animation will be created for every instance of the property changed, and started immediately,
and run until completion. This may be useful for cosmetic changes, such as animating
the opacity or color of an object on mouseEnter or mouseLeave.</p>
<p>You can only specify properties that exist on the GraphObject, and are also registered with <a href="AnimationManager.html#static-defineAnimationEffect">AnimationManager.defineAnimationEffect</a>.
By default these properties are:</p>
<ul>
<li><code>"position"</code></li>
<li><code>"location"</code> (on Parts)</li>
<li><code>"scale"</code></li>
<li><code>"opacity"</code></li>
<li><code>"angle"</code></li>
<li><code>"desiredSize"</code></li>
<li><code>"width"</code></li>
<li><code>"height"</code></li>
<li><code>"background"</code></li>
<li><code>"fill"</code> (on Shapes)</li>
<li><code>"strokeWidth"</code> (on Shapes)</li>
<li><code>"strokeDashOffset"</code> (on Shapes)</li>
<li><code>"stroke"</code> (on Shapes, TextBlocks)</li>
</ul>
<p>Examples of defining additional animation properties are given in the <a href="../../intro/animation.html">Introduction Page on Animations</a>.</p>
</div><dl class="tsd-comment-tags"><dt class="">since</dt><dd><p>2.1</p>
</dd></dl></div></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"><a href="AnimationTrigger.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-accessor tsd-parent-kind-class"><a href="AnimationTrigger.html#animationSettings" class="tsd-kind-icon">animation<wbr/>Settings</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="AnimationTrigger.html#propertyName" class="tsd-kind-icon">property<wbr/>Name</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="AnimationTrigger.html#startCondition" class="tsd-kind-icon">start<wbr/>Condition</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"><a href="AnimationTrigger.html#copy" class="tsd-kind-icon">copy</a></li></ul></section><section class="tsd-index-section "><h3>Constants</h3><ul class="tsd-index-list"><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="AnimationTrigger.html#static-Bundled" class="tsd-kind-icon">Bundled</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="AnimationTrigger.html#static-Default" class="tsd-kind-icon">Default</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="AnimationTrigger.html#static-Immediate" class="tsd-kind-icon">Immediate</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"><a id="constructor" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> constructor<a href="#constructor" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-constructor tsd-parent-kind-class"><li class="tsd-signature tsd-kind-icon">new <wbr/>Animation<wbr/>Trigger<span class="tsd-signature-symbol">(</span>propertyName<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span>, animationSettings<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-symbol">{ </span>duration<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">; </span>easing<span class="tsd-signature-symbol">?: </span><a href="../index.html#EasingFunction" class="tsd-signature-type" data-tsd-kind="Type alias">EasingFunction</a><span class="tsd-signature-symbol">; </span>finished<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol"> }</span>, startCondition<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">EnumValue</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="AnimationTrigger.html" class="tsd-signature-type" data-tsd-kind="Class">AnimationTrigger</a></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>This constructor creates an AnimationTrigger. These are typically constructed within Part templates.
Using <a href="GraphObject.html#static-make">GraphObject.make</a> it might look like:</p>
<div><pre><code class="language-js"><span class="hl-2"> </span><span class="hl-1">var</span><span class="hl-2"> </span><span class="hl-4">$</span><span class="hl-2"> = </span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-4">GraphObject</span><span class="hl-2">.</span><span class="hl-4">make</span><span class="hl-2">;</span><br/><br/><span class="hl-2"> </span><span class="hl-0">// ...</span><br/><span class="hl-2"> </span><span class="hl-5">$</span><span class="hl-2">(</span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-4">Shape</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-0">// Animate all changes to Shape.opacity immediately</span><br/><span class="hl-2"> </span><span class="hl-1">new</span><span class="hl-2"> </span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-5">AnimationTrigger</span><span class="hl-2">(</span><span class="hl-6">"opacity"</span><span class="hl-2">, </span><span class="hl-1">null</span><span class="hl-2">, </span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-4">AnimationTrigger</span><span class="hl-2">.</span><span class="hl-4">Immediate</span><span class="hl-2">),</span><br/><span class="hl-2"> {</span><br/><span class="hl-2"> </span><span class="hl-0">// ...</span><br/><span class="hl-2"> }</span><br/><span class="hl-2"> )</span>
</code></pre>
</div></div><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>propertyName: <span class="tsd-signature-type">string</span></h5><div class="tsd-comment tsd-typography">
<p>A string naming the target property to animate.
This should not be the empty string.</p>
</div></li><li><h5><span class="tsd-flag ts-flagOptional">Optional</span> animationSettings: <span class="tsd-signature-symbol">{ </span>duration<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">; </span>easing<span class="tsd-signature-symbol">?: </span><a href="../index.html#EasingFunction" class="tsd-signature-type" data-tsd-kind="Type alias">EasingFunction</a><span class="tsd-signature-symbol">; </span>finished<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>An optional Object describing properties to set on animations created by this AnimationTrigger.
See the <a href="AnimationTrigger.html#animationSettings">animationSettings</a> property for detail.
If specified, this also sets the <a href="AnimationTrigger.html#startCondition">startCondition</a> to <a href="AnimationTrigger.html#static-Immediate">AnimationTrigger.Immediate</a>.</p>
</div><ul class="tsd-parameters"><li class="tsd-parameter"><h5><span class="tsd-flag ts-flagOptional">Optional</span> duration<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span></h5></li><li class="tsd-parameter"><h5><span class="tsd-flag ts-flagOptional">Optional</span> easing<span class="tsd-signature-symbol">?: </span><a href="../index.html#EasingFunction" class="tsd-signature-type" data-tsd-kind="Type alias">EasingFunction</a></h5></li><li class="tsd-parameter"><h5>finished<span class="tsd-signature-symbol">?: </span>function</h5><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-type-literal"><li class="tsd-signature tsd-kind-icon">finished<span class="tsd-signature-symbol">(</span>animation<span class="tsd-signature-symbol">: </span><a href="Animation.html" class="tsd-signature-type" data-tsd-kind="Class">Animation</a><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"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>animation: <a href="Animation.html" class="tsd-signature-type" data-tsd-kind="Class">Animation</a></h5></li></ul><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></li></ul></li><li><h5><span class="tsd-flag ts-flagOptional">Optional</span> startCondition: <span class="tsd-signature-type">EnumValue</span></h5><div class="tsd-comment tsd-typography">
<p>An optional EnumValue to set the <a href="AnimationTrigger.html#startCondition">startCondition</a> property.</p>
</div></li></ul><h4 class="tsd-returns-title">Returns <a href="AnimationTrigger.html" class="tsd-signature-type" data-tsd-kind="Class">AnimationTrigger</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-accessor tsd-parent-kind-class"><a id="animationSettings" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> animation<wbr/>Settings<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">{ </span>duration<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">; </span>easing<span class="tsd-signature-symbol">?: </span><a href="../index.html#EasingFunction" class="tsd-signature-type" data-tsd-kind="Type alias">EasingFunction</a><span class="tsd-signature-symbol">; </span>finished<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol"> }</span><a href="#animationSettings" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>These settings are only used if the <a href="AnimationTrigger.html#startCondition">startCondition</a> is <a href="AnimationTrigger.html#static-Immediate">AnimationTrigger.Immediate</a>.
Creating a new AnimationTrigger with animationSettings in the constructor automatically sets <a href="AnimationTrigger.html#startCondition">startCondition</a> to <a href="AnimationTrigger.html#static-Immediate">AnimationTrigger.Immediate</a></p>
<div><p>This gets or sets the settings for any <a href="Animation.html">Animation</a>s this trigger creates.
Immediate triggers create a new Animation with each triggering, and apply these settings to that Animation.</p>
<p>This can be set to an object with a subset of possible <a href="Animation.html">Animation</a> settings. The default value is <code>null</code>, which keeps default Animation settings.</p>
<p>Since a <a href="AnimationTrigger.html#startCondition">startCondition</a> of <a href="AnimationTrigger.html#static-Bundled">AnimationTrigger.Bundled</a> uses the default animation,
you must set the properties of <a href="AnimationManager.html#defaultAnimation">AnimationManager.defaultAnimation</a>, and not this property, to modify the animation settings.</p>
<p>To set default settings for <em>all</em> created Animations, you can modify the settings on <a href="AnimationManager.html">AnimationManager</a> instead, such as <a href="AnimationManager.html#duration">AnimationManager.duration</a>.</p>
<p>Possible properties to set in this object are:</p>
<ul>
<li><strong>duration</strong>: a <code>number</code>, corresponding to <a href="Animation.html#duration">Animation.duration</a>.</li>
<li><strong>finished</strong>: a <code>Function</code>, corresponding to <a href="Animation.html#finished">Animation.finished</a>.</li>
<li><strong>easing</strong>: an <code>EasingFunction</code>, corresponding to <a href="Animation.html#easing">Animation.easing</a>.</li>
</ul>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="propertyName" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> property<wbr/>Name<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><a href="#propertyName" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets the name of the property to animate on the target <a href="GraphObject.html">GraphObject</a>.
The default value is set during constructor initialization.</p>
<div><p>You can only specify properties that exist on the GraphObject, and are also registered with <a href="AnimationManager.html#static-defineAnimationEffect">AnimationManager.defineAnimationEffect</a>.
By default these properties are the same as the list of possible Animation effects:</p>
<ul>
<li><code>"position"</code></li>
<li><code>"location"</code> (on Parts)</li>
<li><code>"scale"</code></li>
<li><code>"opacity"</code></li>
<li><code>"angle"</code></li>
<li><code>"desiredSize"</code></li>
<li><code>"width"</code></li>
<li><code>"height"</code></li>
<li><code>"background"</code></li>
<li><code>"fill"</code> (on Shapes)</li>
<li><code>"strokeWidth"</code> (on Shapes)</li>
<li><code>"strokeDashOffset"</code> (on Shapes)</li>
<li><code>"stroke"</code> (on Shapes, TextBlocks)</li>
</ul>
<p>Examples of defining additional properties by adding animation effects are given in the <a href="../../intro/animation.html">Introduction Page on Animations</a>.</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="startCondition" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> start<wbr/>Condition<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span><a href="#startCondition" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets the starting condition for this trigger.</p>
<div><p>AnimationTriggers can invoke an animation immediately,
starting a new animation with each property of each GraphObject that has been modified,
or they can (more efficiently) be bundled together into the default animation (<a href="AnimationManager.html#defaultAnimation">AnimationManager.defaultAnimation</a>)
and begin only one animation, at the end of the next transaction.</p>
<p>It is useful for the startCondition to be <a href="AnimationTrigger.html#static-Immediate">AnimationTrigger.Immediate</a> when changing GraphObject properties
on <a href="GraphObject.html#mouseEnter">GraphObject.mouseEnter</a> or <a href="GraphObject.html#mouseLeave">GraphObject.mouseLeave</a>.
It is useful for the startCondition to be <a href="AnimationTrigger.html#static-Bundled">AnimationTrigger.Bundled</a> when changing several GraphObject properties together,
such as when highlighting multiple parts, on selection changes, and during transactions, or when performance is a consideration.</p>
<p>These behaviors can be set with the values <a href="AnimationTrigger.html#static-Immediate">AnimationTrigger.Immediate</a> and <a href="AnimationTrigger.html#static-Bundled">AnimationTrigger.Bundled</a>, respectively.
The default value, <a href="AnimationTrigger.html#static-Default">AnimationTrigger.Default</a>, attempts to infer which is best:
It will start immediately if there is no ongoing transaction
or if <a href="Diagram.html#skipsUndoManager">Diagram.skipsUndoManager</a> is true, and otherwise bundle them.</p>
</div></div></li></ul></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"><a id="copy" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagVirtual">Virtual</span> copy<a href="#copy" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class"><li class="tsd-signature tsd-kind-icon">copy<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="AnimationTrigger.html" class="tsd-signature-type" data-tsd-kind="Class">AnimationTrigger</a></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Create a copy of this AnimationTrigger, with the same property values.</p>
</div><h4 class="tsd-returns-title">Returns <a href="AnimationTrigger.html" class="tsd-signature-type" data-tsd-kind="Class">AnimationTrigger</a></h4><div></div></li></ul></section></section><section class="tsd-panel-group tsd-member-group "><h2>Constants</h2><section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a id="static-Bundled" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagStatic">Static</span> Bundled<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span><a href="#static-Bundled" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-comment tsd-typography">
<p>Used as a value for <a href="AnimationTrigger.html#startCondition">startCondition</a>.
The AnimationManager will use the default animation to prepare a single Animation that begins when the current transaction has ended.
This animation may be canceled if a new transaction is started.</p>
</div></section><section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a id="static-Default" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagStatic">Static</span> Default<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span><a href="#static-Default" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-comment tsd-typography">
<p>Used as a value for <a href="AnimationTrigger.html#startCondition">startCondition</a>.
GoJS will attempt to <a href="AnimationTrigger.html#static-Bundled">AnimationTrigger.Bundled</a> or <a href="AnimationTrigger.html#static-Immediate">AnimationTrigger.Immediate</a> based on the state of the transaction.
If no transaction is ongoing, this trigger will be treated as using <a href="AnimationTrigger.html#static-Immediate">AnimationTrigger.Immediate</a>,
otherwise it will work as <a href="AnimationTrigger.html#static-Bundled">AnimationTrigger.Bundled</a>.</p>
</div></section><section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a id="static-Immediate" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagStatic">Static</span> Immediate<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span><a href="#static-Immediate" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-comment tsd-typography">
<p>Used as a value for <a href="AnimationTrigger.html#startCondition">startCondition</a>.
A new animation will be created for every instance of the property changed, and started immediately,
and run until completion. This may be useful for cosmetic changes, such as animating
the opacity or color of an object on mouseEnter or mouseLeave.
However, using <a href="AnimationTrigger.html#static-Bundled">AnimationTrigger.Bundled</a> may be more efficient, as it will create fewer</p>
</div></section></section></div><div class="col-4 col-menu menu-sticky-wrap menu-highlight"><nav class="tsd-navigation primary"><ul><li class=""><a href="../index.html">GoJS Class Index</a></li></ul></nav><nav class="tsd-navigation secondary menu-sticky"><ul><li class="current tsd-kind-class"><a href="AnimationTrigger.html" class="tsd-kind-icon">Animation<wbr/>Trigger</a><ul><li class="tsd-kind-constructor tsd-parent-kind-class"><a href="AnimationTrigger.html#constructor" class="tsd-kind-icon">constructor</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="AnimationTrigger.html#animationSettings" class="tsd-kind-icon">animation<wbr/>Settings</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="AnimationTrigger.html#propertyName" class="tsd-kind-icon">property<wbr/>Name</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="AnimationTrigger.html#startCondition" class="tsd-kind-icon">start<wbr/>Condition</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="AnimationTrigger.html#copy" class="tsd-kind-icon">copy</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="AnimationTrigger.html#static-Bundled" class="tsd-kind-icon">Bundled</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="AnimationTrigger.html#static-Default" class="tsd-kind-icon">Default</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="AnimationTrigger.html#static-Immediate" class="tsd-kind-icon">Immediate</a></li></ul></li></ul></nav></div></div></div><div class="tsd w-full max-w-screen-xl mx-auto px-2"><div class="bottom-copyright">Copyright © 1998-2022 by Northwoods Software Corporation.</div></div><footer class=""><div class="tsd w-full max-w-screen-xl mx-auto px-2"><h2>Settings</h2><p class="mb-4">Theme <select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></p></div></footer><div class="overlay"></div><script src="../assets/main.js"></script><script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date()); gtag('config', 'UA-1506307-5');
var getOutboundLink = function(url, label) {
gtag('event', 'click', {
'event_category': 'outbound',
'event_label': label,
'transport_type': 'beacon'
});
}
// topnav
var topButton = document.getElementById("topnavButton");
var topnavList = document.getElementById("topnavList");
topButton.addEventListener("click", function() {
this.classList.toggle("active");
topnavList.classList.toggle("hidden");
document.getElementById("topnavOpen").classList.toggle("hidden");
document.getElementById("topnavClosed").classList.toggle("hidden");
});
document.getElementById("contactBtn").addEventListener("click", function() {
getOutboundLink('https://www.nwoods.com/contact.html', 'contact');
});
document.getElementById("buyBtn").addEventListener("click", function() {
getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');
});
</script></body></html>