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

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

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

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一定是得包含一个完整的组件的，然后在每个要跳转的页面(组件)中引入即可。

样式导入方式

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

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