我们用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看看效果。如果想做出更酷的效果可以自己研究官网的示例过渡动画