I'm struggling to comprehend why the transition doesn't smoothly roll from top to bottom without mode="out-in".
When using out-in, it rolls as expected (albeit with a delay), but without it, the transition just suddenly appears after rolling down.
For reference, here is my codesandbox link: https://codesandbox.io/s/2zlr154m1r
Vue files for your future perusal:
App.vue
<template>
<div id="app">
<button @click="toggleExamples">switched</button>
<div class="wrapper">
<transition name="rolling-down">
<component :is="which" />
</transition>
</div>
<br>
<div class="wrapper">
<transition name="rolling-down" mode="out-in">
<component :is="other" />
</transition>
</div>
</div>
</template>
... (Remaining script and style content removed for brevity)