更新

Author: MaoPou

docs/template.html docs/zh/hscript/template.htmldocs/template.html renamed to docs/zh/hscript/template.html

@@ -203,6 +203,7 @@
             min-height: 600px;
         }
 
+        /* 修改文档内容动画方向 */
         .doc-section {
             position: absolute;
             top: 0;
@@ -211,8 +212,8 @@
             height: 100%;
             padding: 30px;
             opacity: 0;
-            transform: translateX(-50px);
-            transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+            transform: translateX(0);
+            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
             pointer-events: none;
             overflow-y: auto;
         }
@@ -223,9 +224,28 @@
             pointer-events: all;
         }
 
-        .doc-section.exit {
+        /* 下一页进入动画 - 从右侧进入 */
+        .doc-section.enter-right {
+            transform: translateX(100%);
+            opacity: 0;
+        }
+        
+        /* 上一页进入动画 - 从左侧进入 */
+        .doc-section.enter-left {
+            transform: translateX(-100%);
+            opacity: 0;
+        }
+        
+        /* 下一页退出动画 - 向左侧退出 */
+        .doc-section.exit-right {
+            transform: translateX(-100%);
+            opacity: 0;
+        }
+        
+        /* 上一页退出动画 - 向右侧退出 */
+        .doc-section.exit-left {
+            transform: translateX(100%);
             opacity: 0;
-            transform: translateX(50px);
         }
 
         .doc-section h2 {
@@ -922,24 +942,38 @@ <h3>未完待续</h3>
                 contentElement.innerHTML += contentData[key].content;
             });
         }
-
-        function showContent(contentId) {
+        
+        function showContent(contentId, direction = 'next') {
             // 获取当前活动的内容
             const currentActive = document.querySelector('.doc-section.active');
 
             if (currentActive && currentActive.id !== contentId) {
+                // 根据方向设置不同的动画类
+                const exitClass = direction === 'next' ? 'exit-right' : 'exit-left';
+                const enterClass = direction === 'next' ? 'enter-right' : 'enter-left';
+                
                 // 添加退出动画类
-                currentActive.classList.add('exit');
+                currentActive.classList.add(exitClass);
 
                 // 等待退出动画完成
                 setTimeout(() => {
-                    currentActive.classList.remove('active', 'exit');
+                    currentActive.classList.remove('active', exitClass);
 
                     // 显示新内容
                     const targetSection = document.getElementById(contentId);
                     if (targetSection) {
+                        // 添加进入动画类
+                        targetSection.classList.add(enterClass);
                         targetSection.classList.add('active');
 
+                        // 强制重绘，确保动画生效
+                        targetSection.offsetHeight;
+                        
+                        // 移除进入动画类，触发过渡
+                        setTimeout(() => {
+                            targetSection.classList.remove(enterClass);
+                        }, 10);
+                        
                         // 更新页面标题
                         document.title = `NovaFlare Engine | ${contentData[contentId].title}`;
 
@@ -958,7 +992,7 @@ <h3>未完待续</h3>
                             }
                         }, 100);
                     }
-                }, 300); // 与CSS过渡时间匹配
+                }, 300);
             } else if (!currentActive) {
                 // 首次加载
                 const targetSection = document.getElementById(contentId);
@@ -1011,17 +1045,24 @@ <h3>未完待续</h3>
                 });
             });
 
-            // 导航按钮点击
             document.addEventListener('click', function(e) {
                 if (e.target.closest('.nav-btn.next')) {
                     const nextId = e.target.closest('.nav-btn.next').getAttribute('data-next');
-                    showContent(nextId);
+                    showContent(nextId, 'next'); // 传递方向参数
                 } else if (e.target.closest('.nav-btn.prev')) {
                     const prevId = e.target.closest('.nav-btn.prev').getAttribute('data-prev');
-                    showContent(prevId);
+                    showContent(prevId, 'prev'); // 传递方向参数
                 }
             });
 
+            // 侧边栏项点击使用默认方向
+            sidebarItems.forEach(item => {
+                item.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    const contentId = this.getAttribute('data-id');
+                    showContent(contentId, 'next'); // 侧边栏点击使用下一页动画
+                });
+            });
             // 代码复制功能
             initCodeCopy();