Heim > Fragen und Antworten > Hauptteil
微信UI官方演示:http://weui.github.io/weui/#/
点击按钮,页面切换有左右滑动的效果,请问是怎么做到的。代码里没找到。
我也和上面一样用的是https://github.com/progrape/router.git 做路由的,为何官方点击页面切换的时候是有左右滑动的效果,而我没有呢?
我用起来很卡顿。。。。。
黄舟2017-04-17 13:22:59
自己解决了,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
}