feat(P4): precompute移植+app.js sources双向回填+回归1003/1003+验收体积/文件/data.json

site/sources/pagetransition/jsx.txt

@@ -0,0 +1,25 @@
+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>
+  );
+}