react页面实现进出场动画

进出场动画"/>

react页面实现进出场动画

react-animated-router 依赖

文档：
直接路由组件 Switch替换为 AnimatedRouter

标红报错了

开发中(ts)遇到问题 替换后一直报错 说缺少必要属性 看了源码 加上以下几个属性后没报错（enter ，exit， appear）
<AnimatedRouter enter exit appear> ... </AnimatedRouter>

简单记录一下怎么改进出场动画样式

引入一下样式 （‘react-animated-router/animate.css’）安装包里面复制出来修改的 默认不改是左右动画

// ------页面进出场动画 start-------
.animated-router-container {height: 100%;
}
.animated-router-in-transition {/* 页面动画中 */position: relative;width: 100%;overflow: hidden;
}
.animated-router-forward-enter {transform: translate(-20px);opacity: 0;
}
.animated-router-forward-enter-active {transform: translate(0);opacity: 1;
}
.animated-router-forward-exit {transform: translate(0);opacity: 1;
}
.animated-router-forward-exit-active {transform: translate(100%);opacity: 0;
}
.animated-router-backward-enter {transform: translate(-20px);opacity: 0;
}
.animated-router-backward-enter-active {transform: translate(0);opacity: 1;
}
.animated-router-backward-exit {transform: translate(0);opacity: 1;
}
.animated-router-backward-exit-active {transform: translate(100%);opacity: 0;
}
.animated-router-forward-enter-active,
.animated-router-forward-exit-active,
.animated-router-backward-enter-active,
.animated-router-backward-exit-active {/* 不同过渡阶段需要的过渡时间与缓动效果 */transition: all 0.4s ease-in;
}
.animated-router-forward-exit,
.animated-router-backward-exit {position: absolute !important;width: 100%;top: 0;left: 0;
}
// ------页面进出场动画 end-------

出现警告尝试安装以下两个插件

npm install react-transition-group@2.3.0 --save
npm install –save-dev prop-types

另一个组件库进出场动画 - Ant Motion