<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>
export default {
  name: 'KolePageTransition',
  props: {
    text: { type: String, default: '当前页面内容' }
  },
  data() {
    return { animClass: 'kole-pt-fade', token: 0 };
  },
  methods: {
    trigger(type) {
      this.animClass = 'kole-pt-' + type;
      this.token++;
    }
  }
};
</script>

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