mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
11 lines
3.8 KiB
Markdown
11 lines
3.8 KiB
Markdown
---
|
|
id: layoutanimation
|
|
title: LayoutAnimation
|
|
category: APIs
|
|
permalink: docs/layoutanimation.html
|
|
---
|
|
<div><div><p>Automatically animates views to their new positions when the
|
|
next layout happens.</p><p>A common way to use this API is to call it before calling <code>setState</code>.</p><p>Note that in order to get this to work on <strong>Android</strong> you need to set the following flags via <code>UIManager</code>:</p><div class="prism language-javascript">UIManager<span class="token punctuation">.</span>setLayoutAnimationEnabledExperimental <span class="token operator">&&</span> UIManager<span class="token punctuation">.</span><span class="token function">setLayoutAnimationEnabledExperimental</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/layoutanimation.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="configurenext"></a><span class="methodType">static </span>configureNext<span class="methodType">(config, onAnimationDidEnd?)</span> <a class="hash-link" href="docs/layoutanimation.html#configurenext">#</a></h4><div><p>Schedules an animation to happen on the next layout.</p><p>@param config Specifies animation properties:</p><ul><li><code>duration</code> in milliseconds</li><li><code>create</code>, config for animating in new views (see <code>Anim</code> type)</li><li><code>update</code>, config for animating views that have been updated
|
|
(see <code>Anim</code> type)</li></ul><p>@param onAnimationDidEnd Called when the animation finished.
|
|
Only supported on iOS.
|
|
@param onError Called on error. Only supported on iOS.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="create"></a><span class="methodType">static </span>create<span class="methodType">(duration, type, creationProp)</span> <a class="hash-link" href="docs/layoutanimation.html#create">#</a></h4><div><p>Helper for creating a config for <code>configureNext</code>.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="checkconfig"></a><span class="methodType">static </span>checkConfig<span class="methodType">(config, location, name)</span> <a class="hash-link" href="docs/layoutanimation.html#checkconfig">#</a></h4></div></div></span><span><h3><a class="anchor" name="properties"></a>Properties <a class="hash-link" href="docs/layoutanimation.html#properties">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="types"></a>Types<span class="propType">: CallExpression</span> <a class="hash-link" href="docs/layoutanimation.html#types">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="properties"></a>Properties<span class="propType">: CallExpression</span> <a class="hash-link" href="docs/layoutanimation.html#properties">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="presets"></a>Presets<span class="propType">: ObjectExpression</span> <a class="hash-link" href="docs/layoutanimation.html#presets">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="easeineaseout"></a>easeInEaseOut<span class="propType">: CallExpression</span> <a class="hash-link" href="docs/layoutanimation.html#easeineaseout">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="linear"></a>linear<span class="propType">: CallExpression</span> <a class="hash-link" href="docs/layoutanimation.html#linear">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="spring"></a>spring<span class="propType">: CallExpression</span> <a class="hash-link" href="docs/layoutanimation.html#spring">#</a></h4></div></div></span></div> |