<template>
  <div class="kole-pt">
    <div class="kole-pt-bar">
      <button class="kole-btn" @click="trigger('fade')">淡入</button>
      <button class="kole-btn" @click="trigger('slide')">滑动</button>
      <button class="kole-btn" @click="trigger('zoom')">缩放</button>
    </div>
    <div class="kole-pt-stage" :class="animClass" :key="token">{{ text }}</div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
  text: { type: String, default: '当前页面内容' }
});
const animClass = ref('kole-pt-fade');
const token = ref(0);

function trigger(type) {
  animClass.value = 'kole-pt-' + type;
  token.value++;
}
</script>

<style src="./PageTransition.css"></style>
