vue后台管理系统切换页面动画

绝地灬酷狼 2021-07-26 11:17 705阅读 0赞

<transition name="fade-transform" mode="out-in">
         <router-view></router-view>
    </transition>

在公共样式中添加

// global transition css
    
    /* fade */
    .fade-enter-active,
    .fade-leave-active {
      transition: opacity 0.28s;
    }
    
    .fade-enter,
    .fade-leave-active {
      opacity: 0;
    }
    
    /* fade-transform */
    .fade-transform-leave-active,
    .fade-transform-enter-active {
      transition: all .5s;
    }
    
    .fade-transform-enter {
      opacity: 0;
      transform: translateX(-30px);
    }
    
    .fade-transform-leave-to {
      opacity: 0;
      transform: translateX(30px);
    }
    
    /* breadcrumb transition */
    .breadcrumb-enter-active,
    .breadcrumb-leave-active {
      transition: all .5s;
    }
    
    .breadcrumb-enter,
    .breadcrumb-leave-active {
      opacity: 0;
      transform: translateX(20px);
    }
    
    .breadcrumb-move {
      transition: all .5s;
    }
    
    .breadcrumb-leave-active {
      position: absolute;
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，705人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue3后台管理系统（十七）布局切换组件

目录一、场景效果二、图标三、组件封装四、使用案例 -------------------- 一、场景效果 ![3c566467352b49c6a303

青旅半醒/ 2024年03月26日 13:44/ 0 赞/ 103 阅读

相关 Vue3后台管理系统（八）国际化切换组件

一、图标下载language.svg图标，存放到src/assets/icons文件夹下：[iconfont-阿里巴巴矢量图标库][iconfont-] ![efb2

末蓝、/ 2024年03月26日 12:18/ 0 赞/ 76 阅读

相关写一个vue的后台管理页面

写一个 Vue 的后台管理页面，需要您掌握一定的 Vue 开发基础。下面是大致的步骤： 1. 安装 Vue CLI：如果您的电脑上还没有安装 Vue CLI，可以通过运行命

浅浅的花香味﹌/ 2024年03月25日 18:04/ 0 赞/ 42 阅读

相关 vue 做后台管理系统

vue 做后台管理系统展开目录结构： ![70][] 请参考： http://www.cnblogs.com/herozhou/p/7434931.ht

淩亂°似流年/ 2023年06月30日 02:39/ 0 赞/ 85 阅读

相关 Vue - router-view 页面切换过渡动画（CSS）

效果图 ![在这里插入图片描述][20210713115145580.gif] 实现代码复制即可。  <transi

迈不过友情╰/ 2023年01月23日 06:51/ 0 赞/ 297 阅读

相关 vue后台管理系统的布局

首先新建一个vue项目，然后安装element-ui组件，vuex状态管理等需要用到的。项目建立好能运行之后，在src/commponents文件夹下新建一个layout文

迷南。/ 2023年01月11日 01:23/ 0 赞/ 213 阅读

相关分布式医疗挂号系统(六) | 使用Vue开发后台管理系统页面

使用Vue开发后台管理系统页面一、Vue框架的开发流程介绍步骤1：添加路由规则步骤2：添加要跳转的路径步骤3：定义接

左手的ㄟ右手/ 2022年11月18日 01:44/ 0 赞/ 334 阅读

相关 android页面切换动画

首先你要定义好，你要切换的动画效果，例如平移 <?xml version="1.0" encoding="utf-8"?> <set xmlns:androi

╰半夏微凉°/ 2022年08月06日 10:29/ 0 赞/ 247 阅读

相关 vue后台管理系统搭建

软件架构软件架构说明：本项目使用vue框架，写的一个后台管理系统使用说明 \\项目开始之前,\\先安装npm 将taobao作为镜像文件,切换到到cnpm,步骤如

你的名字/ 2022年03月17日 02:40/ 0 赞/ 456 阅读

相关 vue后台管理系统切换页面动画

<transition name="fade-transform" mode="out-in"> <router-view></router-view

绝地灬酷狼/ 2021年07月26日 11:17/ 0 赞/ 706 阅读