<h3 dir="auto">Version</h3>
<p dir="auto">2.5.21</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://jsfiddle.net/365deb40/" rel="nofollow">https://jsfiddle.net/365deb40/</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">Click the app container to toggle whether the two colored containers are shown or not</p>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">Transitions for both elements (rotating and fading)</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">Only the parent (primary / fade) transition is showing</p>
<hr>
<p dir="auto">Try removing the first transition and the v-if attribute of the parent element, to see that the second transition is working fine on its own.</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  &lt;section&gt;
      &lt;div class=&quot;primary&quot; key=&quot;primary&quot;&gt;
        &lt;transition name=&quot;rotate&quot; mode=&quot;out-in&quot;&gt;
          &lt;div class=&quot;secondary&quot; v-if=&quot;show&quot; key=&quot;secondary&quot;&gt;&lt;/div&gt;
        &lt;/transition&gt;
      &lt;/div&gt;
  &lt;/section&gt;"><pre class="notranslate">  <span class="pl-kos">&lt;</span><span class="pl-ent">section</span><span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">primary</span>" <span class="pl-c1">key</span>="<span class="pl-s">primary</span>"<span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">transition</span> <span class="pl-c1">name</span>="<span class="pl-s">rotate</span>" <span class="pl-c1">mode</span>="<span class="pl-s">out-in</span>"<span class="pl-kos">&gt;</span>
          <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">secondary</span>" <span class="pl-c1">v-if</span>="<span class="pl-s">show</span>" <span class="pl-c1">key</span>="<span class="pl-s">secondary</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;/</span><span class="pl-ent">transition</span><span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;/</span><span class="pl-ent">section</span><span class="pl-kos">&gt;</span></pre></div>
<h3 dir="auto">Version</h3>
<p dir="auto">2.5.13</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://jsfiddle.net/4kf9egr3/" rel="nofollow">https://jsfiddle.net/4kf9egr3/</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">Create a transition inside a transition with different effects.</p>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">Two different effects should be shown.</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">Only the effect of the root transition is shown.</p>