美文网首页
切换页面淡出单入

切换页面淡出单入

作者: 郑先森 | 来源:发表于2020-12-20 11:01 被阅读0次

vue的路由跳转过程页面呈现出淡入淡出的效果简单方法:

首先我们到App.vue页面进行操作,

image

然后我们复制以下css代码

image
<style>
*{
    margin: 0 auto;
}
.fade-enter-active, .fade-leave-active {
    transition: all .2s;
    transform: translate(0px,0px);}
.fade-enter, .fade-leave-active {
    opacity: 0;
    transform: translate( -100%,0px);
}
</ style>

.fade-enter-active, .fade-leave-active {
    transition: all .2s;
    transform: translate(0px,0px);
  }
  .fade-enter, .fade-leave-active {
    opacity: 0;
    transform: translate(-100%,0px);
  }

然后~~~~~搞定了 一个简单版的淡入淡出效果做完了

相关文章

  • 切换页面淡出单入

    vue的路由跳转过程页面呈现出淡入淡出的效果简单方法: 首先我们到App.vue页面进行操作, 然后我们复制以下c...

  • 2018-08-16使用router-view同页面加载多路由

    描述:用路由方式实现单页面加载多页面,并且切换页面后状态还是保存的,类似于单页面实现标签页,切换标签页实现内容显示...

  • iOS开发小技巧(持续更新)

    1.切换根视图控制器淡出的效果(切换成登陆页面之类的) self.window.rootViewControlle...

  • 页面切换淡入淡出效果

    有时候,页面在切换过程中,如果能像PPT那样,有个过渡动画,会显得比较高级。 那么,在Quasar项目中,如何实现...

  • 【antd-pro】日常小坑

    单页面切换路由,下一个页面布局置顶

  • vue小记

    1.vuwe不仅可以使用单页面开发也可以进行多页面开发2.单页面应用即只有一个html文件,切换界面通过切换组件实...

  • 前端路由

    Time: 2019-08-18 路由不仅是页面切换,更是代码组织方式。 为什么需要路由 单页应用需要进行页面切换...

  • jquery特殊效果

    fadeOut() 淡出 fadeToggle() 切换淡入淡出 hide() 隐藏元素 show() 显示元素 ...

  • day2

    JQuery 查找 显示隐藏及切换 滑动及切换 淡入、淡出及切换 案例 轮播

  • 十九、jquery之——链式调用、特殊效果、动画、循环

    特殊效果 fadeOut() 淡出 fadeToggle() 切换淡入淡出 hide() 隐藏元素 show() ...

网友评论

      本文标题:切换页面淡出单入

      本文链接:https://www.haomeiwen.com/subject/vkurgktx.html