<p>Then you can use it with the <code>transition</code> attribute, same deal:</p>

<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="title">p</span> <span class="attribute">transition</span>=<span class="value">"fade"</span>&gt;</span><span class="tag">&lt;/<span class="title">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="Staggering_Transitions"><a href="#Staggering_Transitions" class="headerlink" title="Staggering Transitions"></a>Staggering Transitions</h2><p>It’s possible to create staggering transitions when using <code>transition</code> with <code>v-for</code>. You can do this either by adding a <code>stagger</code>, <code>enter-stagger</code> or <code>leave-stagger</code> attribute to your transitioned element:</p>

<p>Or, you can provide a <code>stagger</code>, <code>enterStagger</code> or <code>leaveStagger</code> hook for finer-grained control:</p>

<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">Vue.transition(<span class="string">'stagger'</span>, &#123;</span><br><span class="line"> stagger: <span class="function"><span class="keyword">function</span> (<span class="params">index</span>) </span>&#123;</span><br><span class="line"> <span class="comment">// increase delay by 50ms for each transitioned item,</span></span><br><span class="line"> <span class="comment">// but limit max delay to 300ms</span></span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">Math</span>.min(<span class="number">300</span>, index * <span class="number">50</span>)</span><br><span class="line"> &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>Example:</p>