zoukankan      html  css  js  c++  java
  • vue-router transition 简单切换效果

     route.meta.transition 用来处理不同的路由使用不同的动画

    但是需要我们定义好动画样式  比如  route.meta.transition = aa     则定义样式  .aa-enter-active    .aa-enter-from  .aa-enter-to 等样式

    route.meta.transition || 'fade' 路由中没有定义meta 属性的 transition 属性 则使用fade动画
    总共有6中样式
    enter-active 路由进入过程  包括 enter-from  enter-to
    eave-active 路由离开过程、  包括 leave-from leave-to
    上面两个定义动画效果
    下面的定义 开始和结束的状态
    enter-from 开始进入
    enter-to   进入完成
    leave-from  开始离开
    leave-to   离开完成
    <!--  vue-router 3的写法  -->
    <transition :name="$route.meta.transition || 'fade'">
      <router-view></router-view>
    </transition>
    <!--  vue-router 4的写法  -->
    <router-view v-slot="{ Component, route }">
      <transition :name="route.meta.transition || 'fade'">
        <component :is="Component"></component>
      </transition>
    </router-view>
    
    <style>
    .fade-enter-active,
    .fade-leave-active {
      transition: opacity 0.5s ease 0s;
    }
    
    .fade-enter-from,
    .fade-leave-to {
      opacity: 0;
    }
    
    .fade-leave-from,
    .fade-enter-to {
      opacity: 1;
    }
    </style>
  • 相关阅读:
    软件测试:等价类划分——应用
    软件测试———白盒测试、黑盒测试与灰盒测试
    对软件项目管理的感想
    用maven进行项目管理
    my git ~
    ios支付宝的集成
    三个文本框的验证
    ios测试工具研究(1)-----------XCTest 单元测试
    等价类划分的思考
    git相关
  • 原文地址:https://www.cnblogs.com/rchao/p/15270723.html
Copyright © 2011-2022 走看看