airbnb 這個換頁的效果怎麼做的?

火爆浪子
  • 2.8k

https://www.airbnb.com.tw/hos...

就是按下「開始吧」
之後從左消失
再從又出現新的右面
沒有換頁而且很流暢
右邊的圖也會跟著改
這能用什麼技術實現?

回复
阅读 1.9k
1 个回答

设计这种页面交互,就像是在Photoshop里使用图层一样,通过点击“开始吧”按钮触发CSS的属性变换,从而使得Wizard steps这个层浮动出来(预设覆盖整个页面),具体CSS代码可以直接参考airbnb的源代码,比如wizard层呼出:

    height: 100% !important;
    width: 100% !important;
    position: fixed !important;
    z-index: 102 !important;
    top: 0px !important;
    left: 0px !important;
    animation-name: keyframe_18jn58a !important;
    animation-duration: 1200ms !important;
    animation-timing-function: ease !important;
    background: rgb(255, 255, 255) !important;
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏