vue3.0路由组件左右切换动画，React（基于umi3）路由专场动画

最新推荐文章于 2024-02-22 17:35:03 发布

QingHan_wow

最新推荐文章于 2024-02-22 17:35:03 发布

阅读量1.2k

点赞数 1

文章标签： vue.js react.js

本文链接：https://blog.csdn.net/QingHan_wow/article/details/115133528

版权

vue3.0切换动画原理

// App.vue里
<template>
  <router-view v-slot="{ Component }">
      <transition :name="transitionName">
        <component :is="Component" class="app-view"></component>
      </transition>
  </router-view>
</template>


<script lang='ts'>
import { reactive, toRefs, getCurrentInstance, watch } from "vue";
export default {
  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
  setup() {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const _this = getCurrentInstance()?.proxy as any;
    const state = reactive({
      transitionName: "",
    });
    watch(
      () => _this.$route,
      () => {
      // 自定义页面跳转方法，跳转前将this.$router.isPush设置位true
        if (_this.$router.isPush) {
          state.transitionName = "jump";
          _this.$router.isPush = false;
        } else if (_this.$router.isPush === false) {
          state.transitionName = "back";
        } else {
          _this.$router.isPush = false;
          state.transitionName = "";
        }
      }
    );
    return {
      ...toRefs(state),
    };
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.jump-enter-active {
  transform: translate(100%, 0);
}
.jump-enter-to {
  transform: translate(0, 0);
}

.back-leave-active {
  z-index: 5;
  transform: translate(0, 0);
}
.back-leave-to {
  transform: translate(100%, 0);
}

.app-view {
  transition: transform 0.3s;
}
</style>

在这里插入图片描述

React切换动画

引入插件react-transition-group里的两个组件TransitionGroup和CSSTransition
引入react-router里的Switch组件
引入umi里withRouter的Api

// src/Layout/layout.tsx
import React, { useState, useEffect } from 'react'
import { TransitionGroup, CSSTransition } from 'react-transition-group'
import { history as Router, withRouter } from 'umi'
import { Switch } from 'react-router'
import './index.less'

const routerType = {
        'POP': 'back',
        'PUSH': 'in',
        'REPLACE': 'in'
    }

export default withRouter(({ location, children, history }) => {
return (
   <TransitionGroup className='transition_wrapper' childFactory={(child) => (
         React.cloneElement(child, { classNames: routerType[history.action] })
   )}>
      <CSSTransition key={location.pathname} appear timeout={300}>
         {/* children.props.chiildren就是一个<Router></Router>的列表，location是对应的路由，switch会匹配对应当前hash展示路由 */}
         <Switch location={location}>{(children as any)?.props?.children}</Switch>
      </CSSTransition>
    </TransitionGroup>
)
})

.in-enter-active,
.in-exit-active {
  transition: all .3s;
}

.in-enter-active {
  transform: translate(0, 0) !important;
}

.in-enter {
  z-index: 5 !important;
  transform: translate(100%, 0);
}

.back-enter-active,
.back-exit-active {
  transition: all .3s;
}

.back-exit-active {
  transform: translate(100%, 0) !important;
}

.back-exit {
  z-index: 5 !important;
  transform: translate(0, 0);
}