gpt4 book ai didi

ionic-framework - 在 Ionic 2 中的选项卡之间转换时的动画

转载 作者:行者123 更新时间:2023-12-04 11:37:20 25 4
gpt4 key购买 nike

我有一个带有基本选项卡的 ionic 2 应用程序。

<ion-tabs selectedIndex="1">
<ion-tab [root]="tab1Root" tabTitle="hunts" tabIcon="book"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="hunting" tabIcon="locate"></ion-tab>
</ion-tabs>

选项卡显示完美。但是我想在选项卡之间转换时有一个滑动动画。也就是说,当我从中间选项卡按下最右边的选项卡时,中间选项卡应该滑到左边,最右边的选项卡应该从右边滑入。这是一个基本的安卓动画。

我无法找到有关如何完成此操作的任何详细信息。这在 Ionic (2.2.0) 中仍然不可能吗?

最佳答案

我刚刚提出了不同的解决方案......呵呵
这是一个有趣的,一个原始的想法,但它在 2 分钟内给你一半的过渡感觉

纯 CSS:

  • 全局应用程序的 scss 文件制作一个 css 选择器,它将抓取加载到您的路由器导出的组件 < ionic 标签>
  • 添加css动画开始时 :P - 每次插入新组件时都会运行


  • app-e-tabs ion-router-outlet > .ion-page { 
    animation: fadeIn 0.3s 1 forwards;
    }
    @keyframes fadeIn {
    0% {
    opacity: 0;
    transform: translate3d(0, 5vh, 0);
    }
    100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    }
    }


    当然,可能存在许多可能的问题,而且它永远不会看起来像正确的页面转换……但总比没有好:)

    编辑:
    正如一些人指出的,你应该删除 app-e-tabs从 css 的第一行开始——它是我应用程序中模块的名称——这就是它出现在我的代码中的原因。

    关于ionic-framework - 在 Ionic 2 中的选项卡之间转换时的动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42858415/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com