vux:基于微信端的UI库及页面跳转动画效果

我们用vue做手机端的页面时,经常会出现页面跳转的情况,而一个页面跳到另一个页面时,有时候会让人有种突兀的感受,现在的页面会越来越注重用户体验,瞬间突变的感觉会让用户体验不好。所以今天讲讲vue的transition组件,顺便让大家了解下基于vue的UI库——vux,官网vux示例

vux:基于微信端的UI库及页面跳转动画效果

vux:基于微信端的UI库及页面跳转动画效果

这些vux的组件足够我们开发一些应用,且它是基于weui和vue的,里面的示例很简单,组件都给我们做好了,只需要引用相关的组件就可以直接用了,相信大家都会很快上手。里面有个页面跳转时的动画效果-左右翻转。其中就是用到的transition。还是之前的dome示例,只不过在assets中加了一个跳转的公共样式common.js.
vux:基于微信端的UI库及页面跳转动画效果

common.js中的内容

.slide-up-enter-active,
.slide-up-leave-active {
    transition: all .5s
}

.slide-up-enter,
.slide-up-leave-to {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
}

.slide-go-enter-active,
.slide-go-leave-active {
    transition: all .5s;
    opacity: .8;
}

.slide-go-enter,
.slide-go-leave-to {
    transition: all .5s;
    transform: translate3d(100%, 0, 0);
    opacity: .8;
}

.slide-back-enter-active,
.slide-back-leave-active {
    transition: all .5s;
}

.slide-back-enter,
.slide-back-leave-to {
    transition: all .5s;
    transform: translate3d(-100%, 0, 0);
}

transition一定是得包含一个完整的组件的,然后在每个要跳转的页面(组件)中引入即可。

vux:基于微信端的UI库及页面跳转动画效果

样式导入方式
vux:基于微信端的UI库及页面跳转动画效果

其中slide-go 是向前翻还是向后翻转的样式名,源在common.js中,自己也可以自行修改。每一个要跳转的组件都可以如此设置,然后就可以看到页面跳转时的动画了。

由于视频插件在更新,没法上传动画效果,如果想看的可以到GitHub上download看看效果。如果想做出更酷的效果可以自己研究官网的示例过渡动画

上一篇:初学vuejs


下一篇:RDS-Mysql 物理备份恢复到本地数据库上