Cześć, mam taki kod który ma ładnie pokazać i ukryć div. Ładnie w sensie płynnie. Niestety w rzeczywistości wygląda to tak że najpierw pojawia się tekst a dopiero później tło. Jakaś podpowiedź jak to rozwiązać?

<transition name="fade" mode="in-out">
          <div v-if="isShow">
            <div class="top-info-window">
              <svg class="icon-top" fill='rgb(240, 249, 252)' version='1.1' xmlns='http://www.w3.org/2000/svg'
                   width='100%' height='100%' viewBox='0 0 14 14'>
                <path
                    d='M14 7q0 1.359-0.937 2.512t-2.547 1.82-3.516 0.668q-0.547 0-1.133-0.062-1.547 1.367-3.594 1.891-0.383 0.109-0.891 0.172-0.133 0.016-0.238-0.070t-0.137-0.227v-0.008q-0.023-0.031-0.004-0.094t0.016-0.078 0.035-0.074l0.047-0.070t0.055-0.066 0.062-0.070q0.055-0.062 0.242-0.27t0.27-0.297 0.242-0.309 0.254-0.398 0.211-0.461 0.203-0.594q-1.227-0.695-1.934-1.719t-0.707-2.195q0-1.016 0.555-1.941t1.492-1.598 2.234-1.066 2.719-0.395q1.906 0 3.516 0.668t2.547 1.82 0.937 2.512z'></path>
              </svg>
              <div v-html="text"></div>
            </div>
          </div>
        </transition>