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

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

    HarmonyOSharmonyosharmonyos-next
    阅读 468
    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助手
      157

      解决措施

      可以使用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) 
  } 
}

      参考链接

      页面间转场

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