如何讓 Vuejs 轉換為我的模態添加動畫？

Question

我正在嘗試向這個模態組件添加一個動畫，當用戶單擊按鈕時，該組件從底部向上滑動。 背景模糊在輸入時正確顯示，但模態根本沒有動畫。 我希望它滑入，當模型關閉時，我希望它滑回。

實現這一目標的最佳方法是什么？

<template>
  <div>
    <a @click.prevent="toggle()">
      <slot name="button"></slot>
    </a>
    <div v-if="show" class="bg bg-transition fixed overflow-y-scroll top-0 left-0 flex flex-col items-center justify-center h-screen w-screen bg-opacity-25 bg-gray-400" style="backdrop-filter: blur(15px);">
      <transition mode="out-in" name="slideup">
        <div v-if="show" class="absolute top-0 right-0 left-0 bg-white rounded-tl-4xl rounded-tr-4xl w-full p-6 pb-0" style="margin-top:176px">
          <span class="flex items-center justify-center w-8 h-8 rounded-full bg-white text-gray-800 shadow" @click.prevent="toggle()">
            <svg
                class="fill-current w-full"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19,6.41,17.59,5,12,10.59,6.41,5,5,6.41,10.59,12,5,17.59,6.41,19,12,13.41,17.59,19,19,17.59,13.41,12Z"
                />
                <path d="M0,0H24V24H0Z" fill="none" />
              </svg>
          </span>
          <div class="flex flex-col divide-y divide-gray-600">
            <div>
              <h1 class="heading mt-6">Placeholder Heading <br>R000pm</h1>
              <div class="mt-12 divide-y divide-gray-600">
                <div class="pb-8">
                  <h4 class="subheading">Placeholder Subheading</h4>
                  <p class="par mt-3">Placeholder Paragraph</p>
                  <div class="flex items-center justify-between mt-5">
                    <p class="font-semibold text-gray-1000 leading-none">Placeholder limit</p>
                    <p class="font-bold text-gray-1000 leading-none">R000,00</p>
                  </div>
                </div>
                <div class="py-8">
                  <h4 class="subheading">Placeholder Subheading</h4>
                  <p class="par mt-3">Placeholder Paragraph</p>
                  <div class="flex items-center justify-between mt-5">
                    <p class="font-semibold text-gray-1000 leading-none">Placeholder limit</p>
                    <p class="font-bold text-gray-1000 leading-none">R000,00</p>
                  </div>
                </div>
                <div class="py-8">
                  <h4 class="subheading">Placeholder Subheading</h4>
                  <p class="par mt-3">Placeholder Paragraph</p>
                  <div class="flex items-center justify-between mt-5">
                    <p class="font-semibold text-gray-1000 leading-none">Amount Limit Placeholder</p>
                    <p class="font-bold text-gray-1000 leading-none">R000,00</p>
                  </div>
                  <div class="flex items-center justify-between mt-1">
                    <p class="font-semibold text-gray-1000 leading-none">Placeholder limit</p>
                    <p class="font-bold text-gray-1000 leading-none">R000,00</p>
                  </div>
                </div>
                <div class="py-8">
                  <h4 class="subheading">Placeholder Subheading</h4>
                  <p class="par mt-3">Placeholder Paragraph</p>
                  <div class="flex items-center justify-between mt-5">
                    <p class="font-semibold text-gray-1000 leading-none">Amount Limit Placeholder</p>
                    <p class="font-bold text-gray-1000 leading-none">R000,00</p>
                  </div>
                  <div class="flex items-center justify-between mt-1">
                    <p class="font-semibold text-gray-1000 leading-none">Placeholder limit</p>
                    <p class="font-bold text-gray-1000 leading-none">R000,00</p>
                  </div>
                </div>
                <div class="py-8">
                  <h4 class="subheading">Placeholder Subheading</h4>
                  <p class="par mt-3">Placeholder Paragraph</p>
                  <div class="flex items-center justify-between mt-5">
                    <p class="font-semibold text-gray-1000 leading-none">Amount Limit Placeholder</p>
                    <p class="font-bold text-gray-1000 leading-none">R000,00</p>
                  </div>
                  <div class="flex items-center justify-between mt-1">
                    <p class="font-semibold text-gray-1000 leading-none">Placeholder limit</p>
                    <p class="font-bold text-gray-1000 leading-none">R000,00</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="pt-20">
              <h1 class="heading">Placeholder Heading</h1>
              <div class="mt-8 divide-y divide-gray-800">
                <div class="pb-8">
                  <h4 class="subheading">Placeholder Subheading</h4>
                  <p class="par mt-3">Placeholder Paragraph</p>
                  <div class="flex items-center justify-between mt-5">
                    <p class="font-semibold text-gray-1000 leading-none">Amount Limit Placeholder</p>
                    <p class="font-bold text-gray-1000 leading-none">R000,00</p>
                  </div>
                  <div class="flex items-center justify-between mt-1">
                    <p class="font-semibold text-gray-1000 leading-none">Placeholder limit</p>
                    <p class="font-bold text-gray-1000 leading-none">R000,00</p>
                  </div>
                </div>
                <div class="py-8">
                  <h4 class="subheading">Placeholder Subheading</h4>
                  <p class="par mt-3">Placeholder Paragraph</p>
                  <div class="flex items-center justify-between mt-5">
                    <p class="font-semibold text-gray-1000 leading-none">Amount Limit Placeholder</p>
                    <p class="font-bold text-gray-1000 leading-none">R000,00</p>
                  </div>
                  <div class="flex items-center justify-between mt-1">
                    <p class="font-semibold text-gray-1000 leading-none">Placeholder limit</p>
                    <p class="font-bold text-gray-1000 leading-none">R000,00</p>
                  </div>
                </div>
                <div class="py-8">
                  <h4 class="subheading">Placeholder Subheading</h4>
                  <p class="par mt-3">Placeholder Paragraph</p>
                  <div class="flex items-center justify-between mt-5">
                    <p class="font-semibold text-gray-1000 leading-none">Amount Limit Placeholder</p>
                    <p class="font-bold text-gray-1000 leading-none">R000,00</p>
                  </div>
                  <div class="flex items-center justify-between mt-1">
                    <p class="font-semibold text-gray-1000 leading-none">Placeholder limit</p>
                    <p class="font-bold text-gray-1000 leading-none">R000,00</p>
                  </div>
                </div>
                <div class="py-8">
                  <h4 class="subheading">Placeholder Subheading</h4>
                  <p class="par mt-3">Placeholder Paragraph</p>
                  <div class="flex items-center justify-between mt-5">
                    <p class="font-semibold text-gray-1000 leading-none">Amount Limit Placeholder</p>
                    <p class="font-bold text-gray-1000 leading-none">R000,00</p>
                  </div>
                  <div class="flex items-center justify-between mt-1">
                    <p class="font-semibold text-gray-1000 leading-none">Placeholder limit</p>
                    <p class="font-bold text-gray-1000 leading-none">R000,00</p>
                  </div>
                </div>
                <div class="py-8">
                  <h4 class="subheading">Placeholder Subheading</h4>
                  <p class="par mt-3">Placeholder Paragraph</p>
                  <div class="flex items-center justify-between mt-5">
                    <p class="font-semibold text-gray-1000 leading-none">Amount Limit Placeholder</p>
                    <p class="font-bold text-gray-1000 leading-none">R000,00</p>
                  </div>
                  <div class="flex items-center justify-between mt-1">
                    <p class="font-semibold text-gray-1000 leading-none">Placeholder limit</p>
                    <p class="font-bold text-gray-1000 leading-none">R000,00</p>
                  </div>
                </div>
                <div class="py-8">
                  <h4 class="subheading">Placeholder Subheading</h4>
                  <p class="par mt-3">Placeholder Paragraph</p>
                  <div class="flex items-center justify-between mt-5">
                    <p class="font-semibold text-gray-1000 leading-none">Amount Limit Placeholder</p>
                    <p class="font-bold text-gray-1000 leading-none">R000,00</p>
                  </div>
                  <div class="flex items-center justify-between mt-1">
                    <p class="font-semibold text-gray-1000 leading-none">Placeholder limit</p>
                    <p class="font-bold text-gray-1000 leading-none">R000,00</p>
                  </div>
                </div>
                <div class="py-8">
                  <h4 class="subheading">Placeholder Subheading</h4>
                  <p class="par mt-3">Placeholder Paragraph</p>
                  <div class="flex items-center justify-between mt-5">
                    <p class="font-semibold text-gray-1000 leading-none">Amount Limit Placeholder</p>
                    <p class="font-bold text-gray-1000 leading-none">R000,00</p>
                  </div>
                  <div class="flex items-center justify-between mt-1">
                    <p class="font-semibold text-gray-1000 leading-none">Placeholder limit</p>
                    <p class="font-bold text-gray-1000 leading-none">R000,00</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="pt-20 pb-10">
              <h1 class="heading">What you<br> should know</h1>
              <div class="mt-8 divide-y divide-gray-800">
                <div class="pb-8">
                  <h4 class="subheading">Placeholder Subheading</h4>
                  <p class="par mt-3">Placeholder Paragraph</p>
                </div>
                <div class="pt-8">
                  <h4 class="subheading">Placeholder Subheading</h4>
                  <p class="par mt-3">Placeholder Paragraph</p>
                </div>
              </div>
            </div>
          </div>
          <button class="text-lg font-semibold text-white px-5 py-2 mb-12 bg-orange-100 rounded-full focus:outline-none">Placeholder Button</button>
        </div>
      </transition>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.slideup-enter-active {
  animation: flyover 2s ease-in;
}

.slideup-leave-active {
  animation: flyover-reverse 2s ease-out;
}

.heading {
  @apply text-3xl text-gray-1000 leading-none;
  line-height: 30px;
}

.subheading {
  @apply text-gray-1000 font-bold uppercase;
  font-size: 15px;
  line-spacing: 18px;
}

.par {
  @apply text-gray-1000 text-sm font-medium;
}

.bg-transition {
  animation: bg-opacity .3s ease-in-out;
}

@keyframes bg-opacity {
  0% {
    @apply bg-gray-400 bg-opacity-0;
    backdrop-filter: blur(0px);
  }

  50% {
    background-color: rgb(163, 171, 179, 0.5);
  }

  100% {
    @apply bg-gray-400 bg-opacity-25;
    backdrop-filter: blur(15px);
  }
}

@keyframes flyover {
  0% {
    transform: translateY(60%);
  }

  100% {
    transform: translateY(0%);
  }
}

@keyframes flyover-reverse {
  0% {
    transform: translateY(0%);
  }

  100% {
    transform: translateY(60%);
  }
}
</style>
<script>
export default {
  data () {
    return {
      show: false
    }
  },
  methods: {
    toggle : function() {
        this.show = !this.show;
      }
  }
}
</script>

Answer 1

一般來說，向動態生成的 HTML5 元素添加過渡可能會一團糟。 看看這個偉大的 StackOverflow 答案解釋為什么。

您可以做的是使用v-show指令而不是v-if 。 Vue 將渲染您的組件並簡單地使用display: none CSS 屬性將其隱藏。