vue transition实现页面切换效果
我们都知道vue可以做成单页应用 点击的时候就能切换 如果我们要添加一些视觉效果 比如页面切换的时候有一个缓冲效果 这个时候就需要用到vue里的transition这个标签
在使用这个标签之前需要了解下他的6个类
第一步在app.vue里使用transition标签
这个是默认值
第二步在app.vue里监听用户是跳转还是后退
已下这段代码放在main.js中
第三步编写动画效果 这里设置的切换时长是1.5秒 想改多少直接改就行
.slide-left-enter, .slide-right-leave-to {
opacity:;
transform: translateX(100%)
} .slide-left-leave-to, .slide-right-enter {
opacity:;
transform: translateX(-100%)
} .slide-left-enter-active, .slide-left-leave-active, .slide-right-enter-active, .slide-right-leave-active {
transition: 1.5s;
position: absolute;
top:;
}
第四步配置路由文件 跳转
这里使用的是路由懒加载 这有个好处就是第一次进来的时候也会有个默认过渡效果
这里来个传送门github 自行下载 记得npm i下载依赖包哦!
然后npm run dev 跑一遍 没啥问题~ 记录下 以后用的到
vue transition实现页面切换效果的更多相关文章
- [Swift通天遁地]九、拔剑吧-(8)创建气泡式页面切换效果
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- jquery mobile页面切换效果(Flip toggle switch)(注:jQuery移动使用的数据属性的列表。 )
1.页面切换(data-transition)
- Android - FragmentTabHost 与 Fragment 制作页面切换效果
使用 FragmentTabHost 与 Fragment 制作页面切换效果 API 19 TabHost已经不建议使用了.用 FragmentTabHost 来代替TabHost.实际上 Fragm ...
- Android - TabHost 与 Fragment 制作页面切换效果
Android - TabHost 与 Fragment 制作页面切换效果 Android API 19 , API 23 三个标签页置于顶端 效果图: 在文件BoardTabHost.java中定义 ...
- html5各种页面切换效果和模态对话框
页面动画:data-transition 属性可以定义页面切换是的动画效果.例如:<a href="index.html" data-transition="pop ...
- 基于html5和css3响应式全屏滚动页面切换效果
分享一款全屏响应式的HTML5和CSS3页面切换效果.这个页面布局效果对于那些页面要求固定100%高度和宽度的网站和APP来说是十分有用的.效果图如下: 在线预览 源码下载 HTML wrappe ...
- WP8 NavigationInTransition实现页面切换效果
NavigationInTransition这个是实现页面切换效果,而且没控件来拖,要自己手动写, 将App.xaml.cs中InitializePhoneApplication()函数里的RootF ...
- 在uwp仿IOS的页面切换效果
有时候我们需要编写一些迎合IOS用户使用习惯的uwp应用,我在这里整理一下仿IOS页面切换效果的代码. 先分析IOS的页面切换.用户使用左右滑动方式进行前进和后退,播放类似于FlipView的切换动画 ...
- [Swift通天遁地]九、拔剑吧-(7)创建旋转和弹性的页面切换效果
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
随机推荐
- 【华为敏捷/DevOps实践】7. 敏捷,DevOps,傻傻不分清楚【华为云技术分享】
文:姚冬(华为云DevCloud首席技术布道师,资深DevOps与精益/敏捷专家,金融解决方案技术Leader,中国DevOpsDays社区核心组织者) 前言 敏捷是什么?DevOps是什么?两者有什 ...
- Maven的仓库和settings.xml配置文件
(尊重劳动成果,转载请注明出处:https://blog.csdn.net/qq_25827845/article/details/83549846冷血之心的博客) 快速导航: Maven基础概念和安 ...
- kubernetes-dashboard登录出现forbidden 403
登录k8s dashboard https://xxxxx:6443/api/v1/namespaces/kube-system/services/https:kubernetes-dashboard ...
- pandas-15 df['one_col'].apply()方法的用法
pandas-15 df['one_col'].apply()方法的用法 apply有点像map的用法,可以传入一个函数. 如:df['A'].apply(str.upper) import nump ...
- jQuery设置样式css
一.设置单个样式 $('.div').css('padding-top','8.6rem'); 二.设置多个样式 $('.div').css({'width': "240px",' ...
- Objective-C 知识点拾遗
-- :: UIWebView的使用总结 UIWebView全解
- 当ABAP遇见普罗米修斯
Jerry每次在工作场合中同Prometheus(普罗米修斯)打交道时,都会"出戏",因为这个单词给我的第一印象,并不是用go语言实现的微服务监控利器,而是名导雷德利·斯科特(Ri ...
- github-git clone 下载很慢的问题解决
git clone下载很慢的问题: 下载到指定目录:git clone https://github.com/ChengWuOne/spring-cloud-demo.git D:/日常软件/GitH ...
- python基础-模块(全是理论,没有代码)
模块 概念:一系列功能的结合体.相当于模块包着一堆函数与代码.本质上是py文件. 来源: python内置的模块----→ python解释器的模块 第三方的模块 -----→ 其他人编写提供的 自定 ...
- iview blur事件
在iview中,失去焦点的写法是: @on-blur="editTitle(item, index)"