mirror of
https://github.com/Foundry376/Mailspring.git
synced 2025-01-01 13:14:16 +08:00
34 lines
1.7 KiB
HTML
34 lines
1.7 KiB
HTML
---
|
|
layout: docs
|
|
title: TimeoutTransitionGroupChild
|
|
edit_url: "https://github.com/nylas/N1/blob/master/src/components/timeout-transition-group.cjsx"
|
|
---
|
|
|
|
<h2>Summary</h2>
|
|
|
|
<div class="markdown-from-sourecode">
|
|
<p><p>TimeoutTransitionGroup applies a CSS transition to the components added
|
|
or removed from it's children. It is similar to React's CSSTransitionGroup, but
|
|
that uses the 'transitionend' event, which browsers will not send for any
|
|
number of reasons, including the transitioning node not being painted.</p>
|
|
<p>This TimeoutTransitionGroup instead uses a user-defined timeout to determine
|
|
when it is a good time to remove the component. Currently there is only one
|
|
timeout specified, but in the future it would be nice to be able to specify
|
|
separate timeouts for enter and leave, in case the timeouts for those
|
|
animations differ. Even nicer would be some sort of inspection of the CSS to
|
|
automatically determine the duration of the animation or transition.</p>
|
|
<p>This is adapted from Facebook's CSSTransitionGroup which is in the React
|
|
addons and under the Apache 2.0 License.</p>
|
|
<p>Example:</p>
|
|
<pre><code class="lang-coffee"><span class="hljs-tag"><<span class="hljs-title">TimeoutTransitionGroup</span>
|
|
<span class="hljs-attribute">leaveTimeout</span>=<span class="hljs-value">{125}</span>
|
|
<span class="hljs-attribute">enterTimeout</span>=<span class="hljs-value">{125}</span>
|
|
<span class="hljs-attribute">transitionName</span>=<span class="hljs-value">"sheet-toolbar"</span>></span>
|
|
{toolbarElements[1..-1]}
|
|
<span class="hljs-tag"></<span class="hljs-title">TimeoutTransitionGroup</span>></span>
|
|
</code></pre>
|
|
</p>
|
|
</div>
|
|
|
|
<ul>
|
|
</ul>
|