问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何实现上下切换的页面间跳转动画？

头像
HarmonyOS码上奇行
    12k4149

    如何实现上下切换的页面间跳转动画

    HarmonyOSharmonyosharmonyos-next
    阅读 650
    avatarAI BotBETA

    要实现上下切换的页面间跳转动画，你可以使用CSS的transform属性和transition属性。下面是一个简单的示例代码：

    HTML部分：

    <div class="container">
  <div class="page" id="page1">Page 1</div>
  <div class="page" id="page2">Page 2</div>
  <button id="prevBtn">上一张</button>
  <button id="nextBtn">下一张</button>
</div>

    CSS部分：

    .container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.page {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  transform: translateY(0);
  transition: transform 0.3s ease-in-out;
}

.page-visible {
  transform: translateY(0);
}

    JavaScript部分：

    const page1 = document.getElementById('page1');
const page2 = document.getElementById('page2');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
let currentPage = page1;
let visiblePage = page1;
let isAnimating = false;

function switchPage(page) {
  if (isAnimating) return; // 防止重复触发动画
  isAnimating = true;
  currentPage.classList.remove('page-visible'); // 隐藏当前页面
  page.classList.add('page-visible'); // 显示目标页面
  visiblePage = page; // 更新可见页面为当前页面
  isAnimating = false; // 结束动画状态标记
}

prevBtn.addEventListener('click', function() {
  if (currentPage === page1) return; // 防止重复触发动画和无限循环问题
  switchPage(currentPage === page1 ? page2 : page1); // 切换到上一张或下一张页面，根据当前页面判断
});

nextBtn.addEventListener('click', function() {
  if (currentPage === page2) return; // 防止重复触发动画和无限循环问题
  switchPage(currentPage === page2 ? page1 : page2); // 切换到下一张或上一张页面，根据当前页面判断
});

    这段代码实现了上下切换的页面间跳转动画。当点击上一张或下一张按钮时，当前页面会向上或向下移动，同时目标页面会从下方或上方移动到当前位置。动画的过渡效果是通过CSS的transform属性和transition属性实现的。通过控制页面的transform: translateY()值，可以改变页面的位置。在切换页面时，我们使用JavaScript来控制页面的transform值变化，并通过transition属性实现平滑的过渡效果。同时，通过添加和删除page-visible类名来控制可见页面的显示和隐藏状态。

    1 个回答
    得票最新
    头像
    HarmonyOS码上奇行
      12k4149

      可以使用pageTransition函数来实现页面转场效果，通过PageTransitionEnter和PageTransitionExit指定页面进入和退出的动画效果，将其slide属性设置为SlideEffect.Bottom，则页面入场时从下边划入，出场时滑出到下边，即可实现上下切换效果。

      代码示例

      // PageTransition1.ets 
@Entry 
@Component 
struct PageTransition1 { 
  build() { 
    Stack({ alignContent: Alignment.Bottom }) { 
      Navigator({ target: 'pages/PageTransition2' }) { 
        Image($r('app.media.startIcon')).width('100%').height(200); // 图片存放在media文件夹下 
      } 
    }.height('100%').width('100%') 
  } 
 
  pageTransition() { 
    PageTransitionEnter({ duration: 500, curve: Curve.Linear }).slide(SlideEffect.Bottom) 
    PageTransitionExit({ duration: 500, curve: Curve.Ease }).slide(SlideEffect.Bottom) 
  } 
} 
 
// PageTransition2.ets 
@Entry 
@Component 
struct PageTransition2 { 
  build() { 
    Stack({ alignContent: Alignment.Bottom }) { 
      Navigator({ target: 'pages/PageTransition1' }) { 
        Image($r('app.media.startIcon')).width('100%').height(200); // 图片存放在media文件夹下 
      } 
    }.height('100%').width('100%') 
  } 
 
  pageTransition() { 
    PageTransitionEnter({ duration: 500, curve: Curve.Linear }).slide(SlideEffect.Bottom) 
    PageTransitionExit({ duration: 500, curve: Curve.Ease }).slide(SlideEffect.Bottom) 
  } 
}
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题