import React, { useState } from 'react';
import './PageTransition.css';

export default function PageTransition({ text = '当前页面内容' }) {
  const [animClass, setAnimClass] = useState('aa-pt-fade');
  const [token, setToken] = useState(0);

  const trigger = (type) => {
    setAnimClass('aa-pt-' + type);
    setToken((t) => t + 1);
  };

  return (
    <div className="aa-pt">
      <div className="aa-pt-bar">
        <button className="aa-btn" onClick={() => trigger('fade')}>淡入</button>
        <button className="aa-btn" onClick={() => trigger('slide')}>滑动</button>
        <button className="aa-btn" onClick={() => trigger('zoom')}>缩放</button>
      </div>
      <div className={'aa-pt-stage ' + animClass} key={token}>
        {text}
      </div>
    </div>
  );
}