html5 - 微信UI，大家看过吗，动画效果怎么做到的-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

html5 - 微信UI，大家看过吗，动画效果怎么做到的

PHPz 2017-04-17 13:20:59

305

微信UI官方演示：http://weui.github.io/weui/#/
点击按钮，页面切换有左右滑动的效果，请问是怎么做到的。代码里没找到。

我也和上面一样用的是https://github.com/progrape/router.git 做路由的，为何官方点击页面切换的时候是有左右滑动的效果，而我没有呢？

我用起来很卡顿。。。。。

PHPz

学习是最好的投资！

reply all (1)

黄舟2017-04-17 13:22:59 1 floor

I solved it myself, CSS3

@-webkit-keyframes a { 0% { -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); opacity: 0 } to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } @keyframes a { 0% { -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); opacity: 0 } to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } @-webkit-keyframes b { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } to { -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); opacity: 0 } } @keyframes b { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } to { -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); opacity: 0 } } .page.slideIn { -webkit-animation: a .2s forwards; animation: a .2s forwards } .page.slideOut { -webkit-animation: b .2s forwards; animation: b .2s forwards }