css3實現web app翻頁過度效果

標籤：

最近在開發web app頁面，要實現滑動翻頁，一開始實現的效果是無任何過渡效果的，可是這樣子的話頁面會閃跳一下，使用者體驗非常不好。於是我們主管叫我用jquery mobile,可是用了這個庫之後，問題來了，跳轉到的目標頁面，無法載入目標頁面引入的外部css檔案，最後用css3完美地解決了這個問題；

.pt-page-moveToLeft {                -webkit-animation: moveToLeft .6s ease both;                -moz-animation: moveToLeft .6s ease both;                animation: moveToLeft .6s ease both;            }            @-webkit-keyframes moveToLeft {                from{-webkit-transform:translateX(-100%);}                to { -webkit-transform: translateX(0%); }            }            @-moz-keyframes moveToLeft {                from{-moz-transform:translateX(-100%);}                to { -moz-transform: translateX(0%); }            }            @-o-keyframs moveToLeft{                from{-o-transform:translateX(-100%);}                to(-o-transform:translateX(0%);}            }            @keyframes moveToLeft {                form{transform:translateX(-100%);}                to { transform: translateX(0%); }            }

給整個頁面添加一個div,在添加.pt-page-moveToLeft這個類，就可以實現了。

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

css3實現web app翻頁過度效果