react实现页面切换动画效果

wean 发布于2019-08-26 12:10 / 1834人阅读

摘要：或者复制出来修改再引用也许更好五片尾广告请直接跳过个人小程序，欢迎体验

一.前情概要

注：（我使用的路由是react-router4）
如下图所示，我们需要在页面切换时有一个过渡效果，这样就不会使页面切换显得生硬，用户体验大大提升；

but the 问题是，react的路由动画没有vue那么方便，在vue里面写几个样式就搞定了，在react里面，还要安装插件；
于是我就找了网上的一下方法，像react-addons-css-transition-group等等，又要安装插件，又要改路由的结构，又要搞什么vuex，又要判断什么时候入场动画....
我试了大概两个方法后，不知道为什么都没有成功...秋天不知不觉已经来了，寒风阵阵，不禁想起了vue..但我已经回不了头了；

二.峰回路转

就在这时，我在一篇文章找到了一个插件：

链接：使用react-router v4和react-transition-group实现页面路由切换动画效果

这个是作者解决animated-transitions的bug后封装好的父级组件
于是我打算放手试一试

三.乾坤一掷

使用起来非常简单，分成两步
1.安装：

  npm install react-animated-router --save

2.在项目中使用：

   import AnimatedRouter from "react-animated-router"; //我们的AnimatedRouter组件
   import "react-animated-router/animate.css"; //引入默认的动画样式定义

然后将路由组件 Switch替换为 AnimatedRouter 即可;
按照组件作者的文章完成这两步后，就报错了：

歪？调弥歪？

四.破釜沉舟

个中曲折说来话长，最后我才知道原来还要另外安装两个插件：

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

然后，页面就可以正常运行不报错了，页面切换效果也有了；感谢组件的作者
需要补充的是，动画切换的样式文件就在node_modulesreact-animated-routeranimate.css里，你可以根据自己的需要直接修改动画效果。
或者复制出来修改再引用也许更好；

五.片尾广告（请直接跳过）

个人小程序，欢迎体验：

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108149.html

让React应用“动”起来

摘要：因为其组件只是根据提供的及属性，生成动画的数据，业务应用中拿到生成的数据后根据需要添加需要动画的组件样式。除了上述简单的动画应用，在复杂动画的实现方面，表现非常优越。 WEB应用中动画很重要不管是web应用还是原生应用，也不论是PC端应用还是移动端应用，动画都扮演了一个重要的角色。尽管动画并不会添加应用的实际动能，但一个好的动画，一个流畅且优雅，选择在恰当时机出现的动画，能为应用增...

xiyang 2019-08-22 16:47 评论0 收藏0
【译】只需四个步骤：使用 React 实现页面过渡动画

摘要：翻译疯狂的技术宅作者英文标题英文地址说明本文首发于公众号在本文中，我将向你展示如何使用和库中的生命周期方法来实现页面的过渡效果。我们还用创建了一个变量，可以用它来对封装的子组件中的的不同样式属性实现动画效果。用渲染，并且或者插入动画状态值。翻译：疯狂的技术宅作者：Martin Haagensli英文标题：Animated page transitions with React Rou...

moven_j 2019-08-20 18:34 评论0 收藏0
精读《怎么用 React Hooks 造轮子》

摘要：可以看到，这样不仅没有占用组件自己的，也不需要手写回调函数进行处理，这些处理都压缩成了一行。效果通过拿到周期才执行的回调函数。实现等价于的回调仅执行一次时，因此直接把回调函数抛出来即可。 1 引言上周的精读《React Hooks》已经实现了对 React Hooks 的基本认知，也许你也看了 React Hooks 基本实现剖析（就是数组），但理解实现原理就可以用好了吗？学的是...

Shihira 2019-08-26 13:22 评论0 收藏0
GitHub 值得收藏的前端项目[每月更新...]

摘要：也是一款优秀的响应式框架站点所使用的一套框架为微信服务量身设计的一套框架一组很小的，响应式的组件，你可以在网页的项目上到处使用一个可定制的文件，使浏览器呈现的所有元素，更一致和符合现代标准。 GitHub 值得收藏的前端项目整理与收集的一些比较优秀github项目，方便自己阅读，顺便分享出来，大家一起学习，本篇文章会持续更新，版权归原作者所有。欢迎github star与fork 预...

maxmin 2019-08-29 16:07 评论0 收藏0