<h3 dir="auto">Version</h3>
<p dir="auto">2.6.10</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://jsfiddle.net/ae82rfnv/" rel="nofollow">https://jsfiddle.net/ae82rfnv/</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">While operating, carefully notice of the transitions</p>
<p dir="auto">Working flow</p>
<ol dir="auto">
<li>tick first box (parent transition plays)</li>
<li>tick second box (child transition plays)</li>
<li>untick second box (child transition plays)</li>
<li>untick first box (parent transition plays)</li>
</ol>
<p dir="auto">Broken flow n°1</p>
<ol dir="auto">
<li>tick first box (parent transition plays)</li>
<li>tick second box (child transition plays)</li>
<li>untick first box (only parent transition plays)</li>
</ol>
<p dir="auto">Broken flow n°2</p>
<ol dir="auto">
<li>tick second box (nothing happens)</li>
<li>tick first box (the 2 transitions play in sync)</li>
<li>untick first box (only parent transition plays)</li>
</ol>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">While unmounting, a transition should search for nested transition and operates in sequence carefully, running children transition first, then playing its own transition before unmounting, so all children transition could run their "leave" transition carefully.</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">Only the parent transiton runs, ignoring the children transition.</p>
<hr>
<p dir="auto">I understand why it does what it does as is, and it makes sense from mounting point of view ; where the logic fails is in the "final effect" : while the 2 transitions (parent and child) play correctly when mounting, it doesn't run "the opposite way/backwards" when unmounting.</p>
<h3 dir="auto">Version</h3>
<p dir="auto">2.5.22</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://jsfiddle.net/wx91uLft/" rel="nofollow">https://jsfiddle.net/wx91uLft/</a><br>
other: <a href="https://jsfiddle.net/ae82rfnv/" rel="nofollow">https://jsfiddle.net/ae82rfnv/</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<ul dir="auto">
<li>Show/hide elements with the  "Toggle" button.</li>
<li>Show/hide elements with the  "Toggle Ticked" button. Shows a workaround.</li>
</ul>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">All transitions should be triggered on leave, even for nested child elements.</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">Transition classes don't get applied to nested child elements, when conditions for leaving transitions occur on the same tick.</p>
<p dir="auto">Workaround: Delaying the parent transitions by one tick fixes the problem.</p>
<hr>
<p dir="auto">This has been reported, but got closed due to the sample code did not use <code class="notranslate">appear</code> on the <code class="notranslate">&lt;transition&gt;</code> elements. (See issues <a href="https://github.com/vuejs/vue/issues/7643" data-hovercard-type="issue" data-hovercard-url="/vuejs/vue/issues/7643/hovercard">#7643</a> and <a href="https://github.com/vuejs/vue/issues/9243" data-hovercard-type="issue" data-hovercard-url="/vuejs/vue/issues/9243/hovercard">#9243</a>)</p>
<p dir="auto">My example is more detailed and also provides a workaround.</p>