Почему не работает анимация tailwind?

Подскажите, пожалуйста, почему не выполняется анимация (при изменении свойства isActive) для блока с классом popup (2 див после teleport)?

<template>
<teleport to="body">
<div class="fixed top-0 bottom-0 right-0 left-0 flex items-center justify-center bg-popup-gray" :class="{'visible opacity-100 z-9000':isActive, 'hidden opacity-0 -z-1':!isActive}">
  <div class="popup center shadow-popup bg-white rounded-lg p-6 w-112.5 box-border z-2 text-center transform scale-50 opacity-0 transition-all duration-10000 ease-in-out " :class="{'opacity-100 -top-2full transform scale-100 ':isActive, '-top-2full ':!isActive}">
    <div class="icon my-1.5 w-12.5 h-12.5 text-center inline-block text-6xl text-red">
    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" ><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z" class=""></path></svg>
    </div>
    <h1 class="title mt-2.5 m-1 font-Abel text-3xl">
      {{ title }}
    </h1>
    <p class="description p-1 mt-1 font-TT text-text-popup">
      {{ message }}
    </p>
    <button class="my-3 focus:outline-none text-black font-Abel w-27.5 h-11 cursor-pointer flex-shrink-0 rounded-full uppercase font-semibold my-2.5 cursor-pointer bg-none text-black transition duration-300 ease-in-out border-2 border-black " @click.prevent="isActive = !isActive"
      Закрыть
    </button>
  </div>
</div>
</teleport>
</template>