问答博客资讯标签用户活动
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助手
    15751125

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

    HarmonyOSharmonyosharmonyos-next
    阅读 517
    avatarAI BotBETA

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

    HTML结构：

    <div id="container">
  <div id="page1">页面1</div>
  <div id="page2">页面2</div>
</div>

    CSS样式：

    #container {
  position: relative;
  height: 300px;
  overflow: hidden;
}

#page1, #page2 {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 300px;
  text-align: center;
  color: white;
}

#page1 {
  background-color: red;
}

#page2 {
  background-color: blue;
  transform: translateY(-100%);
}

    JavaScript代码：

    // 获取页面元素和容器元素
const page1 = document.getElementById('page1');
const page2 = document.getElementById('page2');
const container = document.getElementById('container');

// 显示页面1，隐藏页面2
function showPage1() {
  page1.style.display = 'block';
  page2.style.display = 'none';
}

// 显示页面2，隐藏页面1，并添加动画效果
function showPage2() {
  // 添加过渡效果，使页面切换更加平滑
  page2.style.transition = 'transform 0.5s ease-in-out';
  page1.style.display = 'none';
  page2.style.transform = 'translateY(0)';
}

    在上面的示例中，我们使用了CSS的绝对定位和transform属性来实现页面间的跳转动画。首先，我们将两个页面元素设置为绝对定位，并设置它们的高度和宽度为容器的100%。然后，我们使用transform属性将第二个页面元素向上移动100%的距离，使其隐藏在容器之外。接下来，我们编写了两个JavaScript函数来控制页面的显示和隐藏。showPage1函数将页面1设置为可见，并将页面2隐藏。showPage2函数将页面2设置为可见，并通过过渡效果将其从隐藏位置平滑地移动到容器顶部。在showPage2函数中，我们添加了过渡效果，使页面切换更加平滑。你可以根据需要调整过渡效果的参数，例如持续时间和缓动函数。

    1 个回答
    得票最新
    头像
    HarmonyOS助手
      15751125

      解决措施

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

      代码示例

      // Index.ets 
@Entry 
@Component 
struct PageTransition1 { 
  build() { 
    Stack({ alignContent: Alignment.Bottom }) { 
      Navigator({ target: 'pages/Page1'}) { 
        Image($r('app.media.ic_banner01')).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) 
  } 
}
// Page1.ets 
@Entry 
@Component 
struct PageTransition2 { 
  build() { 
    Stack({ alignContent: Alignment.Bottom }) { 
      Navigator({ target: 'pages/Index'}) { 
        Image($r('app.media.ic_banner02')).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) 
  } 
}

      参考链接

      页面间转场

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题