---
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&#39;s children. It is similar to React&#39;s CSSTransitionGroup, but
that uses the &#39;transitionend&#39; 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&#39;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">&lt;<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>&gt;</span>
  {toolbarElements[1..-1]}
<span class="hljs-tag">&lt;/<span class="hljs-title">TimeoutTransitionGroup</span>&gt;</span>
</code></pre>
</p>
</div>

<ul>
</ul>