Как во Vue 3 сделать transition внутри блока?

Question

[Maksim Drazdou]

Есть обертка для модального окна:

<template>
      <div class="tw-fixed tw-inset-0 tw-z-[1000] tw-overflow-hidden" tabindex="-1">
        <div class="tw-fixed tw-inset-0 tw-bg-black tw-opacity-60 tw-z-[1]" @click.prevent="closeModal"></div>
        <div class="tw-h-full tw-overflow-y-auto tw-overscroll-contain tw-relative">
          <div class="tw-flex tw-items-center tw-justify-center tw-w-full tw-min-h-screen">
            <transition name="loading-modal">
              <div
                :class="modalClass"
                class="tw-inline-block tw-my-3 tw-relative  tw-z-[2]"
              >
                <div :class="customClass" class="tw-relative">
                  <span :class="$style.close" @click.prevent="closeModal"
                  ><IconClose
                  /></span>
                  <slot name="header"></slot>
                  <slot name="body"></slot>
                </div>
              </div>
            </transition>
          </div>
        </div>
      </div>
    </template>

    <style lang="scss">
    .loading-modal-enter-active {
      animation: modal 0.33s ease-out;
    }
    
    .loading-modal-leave-active {
      animation: modal 0.33s ease-in reverse;
    }
    
    @keyframes modal {
      0% {
        opacity: 0%;
        transform: translateY(100%);
      }
      100% {
        opacity: 100%;
        transform: translateY(0);
      }
    }
    </style>

Есть модалка обратной связи:

<template>
      <ModalsAppSlot custom-class="tw-bg-white tw-rounded-lg tw-py-6 tw-px-6 lg:tw-py-10 lg:tw-px-12"
          modal-class="tw-w-[96%] lg:tw-w-[700px]" name="qa" @close="closeModal"
      >
        <template v-slot:header>
          <div class="tw-relative tw-text-center">
            <div class="tw-text-2xl tw-font-semibold lg:tw-text-4xl">Заказать звонок</div>
            <div class="tw-font-medium tw-my-2.5">
              Наш специалист перезвонит вам в ближайшее время
            </div>
          </div>
        </template>
        <template v-slot:body>
          <div class="tw-py-10 tw-pb-5">
            <div class="qaForm">
              <div class="tw-flex tw-flex-wrap -tw-mx-3.5">
                <div class="tw-w-full tw-px-3.5 lg:tw-w-1/2">
                  <div class="tw-mb-3 lg:tw-mb-6">
                    <label class="tw-block tw-font-medium tw-opacity-90 tw-mb-2.5" for="">Ваше имя</label
                    ><input
                      class="tw-rounded-lg tw-w-full tw-resize-none tw-border tw-border-[#d9d9d9] tw-h-[50px] tw-p-2.5"
                      placeholder="Александр..."
                      type="text"
                  />
                  </div>
                </div>
                <div class="tw-w-full tw-px-3.5 lg:tw-w-1/2">
                  <div class="tw-mb-3 lg:tw-mb-6">
                    <label class="tw-block tw-font-medium tw-opacity-90 tw-mb-2.5" for="">Номер телефона</label
                    ><input
                      class="tw-rounded-lg tw-w-full tw-resize-none tw-border tw-border-[#d9d9d9] tw-h-[50px] tw-p-2.5"
                      placeholder="[phone]"
                      type="text"
                  />
                  </div>
                </div>
              </div>
              <div class="tw-mb-3 lg:tw-mb-6">
                <label class="tw-block tw-font-medium tw-opacity-90 tw-mb-2.5" for="">Сообщение...</label>
                <textarea
                    id=""
                    class="tw-rounded-lg tw-w-full tw-resize-none tw-border tw-border-[#d9d9d9] tw-p-2.5"
                    cols="30"
                    name=""
                    placeholder="Не обязательно"
                    rows="5"
                ></textarea>
              </div>
              <div class="tw-mb-3 lg:tw-mb-6">
                <!--            <WebFormCheckbox-->
                <!--                :label="'Согласен на обработку персональных данных'"-->
                <!--                name="rule"-->
                <!--            />-->
              </div>
              <button
                  class="tw-w-full tw-h-12 tw-font-semibold tw-rounded-md tw-border-none tw-flex tw-items-center tw-justify-center tw-px-5 tw-bg-default-600 tw-text-white tw-text-base hover:tw-bg-default-700"
              >
                Отправить
              </button>
            </div>
          </div>
        </template>
      </ModalsAppSlot>
    </template>
    
    <script lang="ts" setup>
      import useModal from '~/composables/useModal';
    
      const { toggleFeedbackModal } = useModal();
    
      const closeModal = (data: boolean) => {
        toggleFeedbackModal(data);
      };
    </script>

В шаблоне вызываю модалку вот так:

<teleport to="body">
      <ModalsAppFeedback v-if="isFeedbackModal"/>
    </teleport>

Можно ли как-то сделать, чтобы transition срабатывал внутри блока?

Answer 1

[Антон Антон]

transition срабатывает при появлении или при исчезновении содержимого, например можно переключать через v-if (если несколько блоков, то одновременно видимым должен быть только один, либо вместо transition использовать transition-group, что влечет за собой некоторые нюансы, например появление лишнего тега-обертки, в любом случае у каждого блока внутри должен быть задан уникальный атрибут key, )

Comments

[Maksim Drazdou]

transition-group не срабатывает, я хочу получить такой эффект как здесь если в моб версии нажать на кнопку связать с хозяином

[Антон Антон]

не срабатывает, потому что не переключается видимость внутри transition. нужно v-if="isFeedbackModal" заменить на пробрасывание props внутрь и

<transition name="loading-modal">
              <div v-if="твое свойство">....

ну или не пробрасывать, но внутри компонента определить что-то со значением false и после показа менять после обновления dom и опять же запихнуть это в v-if у div внутри transition.