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

Question

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

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

Answer 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;