<Transition name="modal"> ... </Transition>

<template>
  <div class="home">
    <transition name="golden">
      <!-- 金子列表 -->
      <div class="golden-box" v-show="show">
        <img
          class="golden"
          :key="idx"
          v-for="idx in 3"
          src="../assets/golden.jpg"
        />
      </div>
    </transition>
  </div>
  <!-- 錢袋子 -->
  <img class="purse" @click="show = !show" src="../assets/purse.png" alt="" />
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
const show = ref(true)
</script>
<style lang="less" scoped>
.home {
  min-height: 66px;
}
.golden-box {
  transition: all 1s ease-in;
  .golden {
    width: 100px;
    position: fixed;
    transform: translate3d(0, 0, 0);
    transition: all .4s;
    &:nth-of-type(1) {
      left: 45%;
      top: 100px;
    }
    &:nth-of-type(2) {
      left: 54%;
      top: 50px;
    }
    &:nth-of-type(3) {
      right: 30%;
      top: 100px;
    }
  }
  &.golden-enter-active {
    .golden {
      transform: translate3d(0, 0, 0);
      transition-timing-function: cubic-bezier(0, 0.57, 0.44, 1.97);
    }
    .golden:nth-of-type(1) {
      transition-delay: 0.1s;
    }
    .golden:nth-of-type(2) {
      transition-delay: 0.2s;
    }
    .golden:nth-of-type(3) {
      transition-delay: 0.3s;
    }
  }
  &.golden-leave-active {
    .golden:nth-of-type(1) {
      transform: translate3d(150px, 140px, 0);
      transition-delay: 0.3s;
    }
    .golden:nth-of-type(2) {
      transform: translate3d(0, 140px, 0);
      transition-delay: 0.2s;
    }
    .golden:nth-of-type(3) {
      transform: translate3d(-100px, 140px, 0);
      transition-delay: 0.1s;
    }
  }
}
.purse {
  position: fixed;
  width: 200px;
  margin-top: 100px;
  cursor: pointer;
}
</style>

// 描述物體
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    box-shadow: 0 0 8px;
    border-radius: 50%;
  }
  // 初始狀態(tài)
  .enter-from {
    transform: translateY(-200px);
  }
  // 運(yùn)動(dòng)過程
  .enter-active {
    transition: transform 1s ease-in-out;
  }
  // 結(jié)束狀態(tài)
  .enter-to {
    transform: translateY(0);
  }

// 創(chuàng)建元素
const div = document.createElement('div')
div.classList.add('box')
// 添加 初始狀態(tài) 和 運(yùn)動(dòng)過程
div.classList.add('enter-from')
div.classList.add('enter-active')
// 將元素添加到頁面上
document.body.appendChild(div)
// 切換元素狀態(tài)
div.classList.remove('enter-from')
div.classList.add('enter-to')

// 嵌套的 requestAnimationFrame 實(shí)現(xiàn)在下一幀中，切換元素狀態(tài)
  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      div.classList.remove("enter-from");
      div.classList.add("enter-to");
    });
  });

// 嵌套的 requestAnimationFrame 實(shí)現(xiàn)在下一幀中，切換元素狀態(tài)
  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      div.classList.remove("enter-from");
      div.classList.add("enter-to");
      // 動(dòng)效結(jié)束后，移除和動(dòng)效相關(guān)的類
      div.addEventListener("transitionend", () => {
        div.classList.remove("enter-to");
        div.classList.remove("enter-active");
      });
    });
  });

// 初始狀態(tài)
  .leave-from {
    transform: translateY(0);
  }
  // 過渡狀態(tài)
  .leave-active {
    transition: transform 2s ease-out;
  }
  // 結(jié)束狀態(tài)
  .leave-to {
    transform: translateY(-300px);
  }

// 創(chuàng)建離場(chǎng)按鈕
  const btn = document.createElement("button");
  btn.innerText = "離場(chǎng)";
  document.body.appendChild(btn);
  // 綁定事件
  btn.addEventListener("click", () => {
    // 設(shè)置離場(chǎng) 初始狀態(tài) 和 運(yùn)動(dòng)過程
    div.classList.add("leave-from");
    div.classList.add("leave-active");
    // 嵌套的 requestAnimationFrame 實(shí)現(xiàn)在下一幀中，切換元素狀態(tài)
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        div.classList.remove("leave-from");
        div.classList.add("leave-to");
        // 動(dòng)效結(jié)束后，移除和動(dòng)效相關(guān)的類
        div.addEventListener("transitionend", () => {
          div.classList.remove("leave-to");
          div.classList.remove("leave-active");
          // 離場(chǎng)動(dòng)效結(jié)束，移除目標(biāo)元素
          div.remove();
        });
      });
    });
  });

<script lang="ts">
import { defineComponent } from 'vue';
const nextFrame = (callback: () => unknown) => {
  requestAnimationFrame(() => {
    requestAnimationFrame(callback)
  })
}
export default defineComponent({
  name: 'Transition',
  setup(props, { slots }) {
    // 返回 render 函數(shù)
    return () => {
      // 通過默認(rèn)插槽，獲取目標(biāo)元素
      const innerVNode = (slots as any).default()
      // 為目標(biāo)元素添加 transition 相關(guān)鉤子
      innerVNode.transition = {
        beforeEnter(el: any) {
          console.log(111)
          // 設(shè)置 初始狀態(tài) 和 運(yùn)動(dòng)過程
          el.classList.add("enter-from");
          el.classList.add("enter-active");
        },
        enter(el: any) {
          // 在下一幀切換狀態(tài)
          nextFrame(() => {
            // 切換狀態(tài)
            el.classList.remove("enter-from");
            el.classList.add("enter-to");
            // 動(dòng)效結(jié)束后，移除和動(dòng)效相關(guān)的類
            el.addEventListener("transitionend", () => {
              el.classList.remove("enter-to");
              el.classList.remove("enter-active");
            });
          })
        },
        leave(el: any) {
          // 設(shè)置離場(chǎng) 初始狀態(tài) 和 運(yùn)動(dòng)過程
          el.classList.add("leave-from");
          el.classList.add("leave-active");
          // 在下一幀中，切換元素狀態(tài)
          nextFrame(() => {
            // 切換元素狀態(tài)
            el.classList.remove("leave-from");
            el.classList.add("leave-to");
            // 動(dòng)效結(jié)束后，移除和動(dòng)效相關(guān)的類
            el.addEventListener("transitionend", () => {
              el.classList.remove("leave-to");
              el.classList.remove("leave-active");
              // 離場(chǎng)動(dòng)效結(jié)束，移除目標(biāo)元素
              el.remove();
            });
          })
        }
      }
      // 返回修改過的 VNode
      return innerVNode
    }
  }
})
</script>