金沙js333娱乐场react兑现页面切换动画效果

一.前情概要

注:(我使用的路由是react-router4)
   
如下图所示,我们需要在页面切换时有一个过渡效果,这样就不会使页面切换显得生硬,用户体验大大提升;
金沙js333娱乐场 1
    but the
问题是,react的路由动画没有vue那么方便,在vue里面写几个样式就搞定了,在react里面,还要安装插件;
 
 于是我就找了网上的一下方法,像react-addons-css-transition-group等等,又要安装插件,又要改路由的结构,又要搞什么vuex,又要判断什么时候入场动画….
 
 我试了大概两个方法后,不知道为什么都没有成功…秋天不知不觉已经来了,寒风阵阵,不禁想起了vue..但我已经回不了头了;

组件

创建组件

var component = React.createClass({
  render: function() {
    return <h1>come on!</h1>
  }
})

项目技术栈

  • shell,nodejs全局环境,es6
  • git基本操作,npm
  • webpack2 webapck-dev-server 及系列插件和loader的配置和使用
  • 最新版react,react-dom,react-addons-css-transition-group动画
    react-addons-css-transition-group参考地址:http://www.cnblogs.com/QxQstar/p/6031559.html
  • 路由系统react-router
  • Axios实现HTTP请求和Promise数据处理
  • 目录划分,分层,优良的代码组织方式等项目架构知道

二.峰回路转

   就在这时,我在一篇文章找到了一个插件:

链接:使用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 即可;
    按照组件作者的文章完成这两步后,就报错了:
金沙js333娱乐场 2
    歪?调弥歪?

引入路由
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'

Project组件开发

  • 通过
    https://api.github.com/users/bailicangdu/repos
  • axios-》一个基于promise的HTTP库
  • antd->Timeline时间轴组件 && Timeline.Item组件的应用;
  • 组件样式优化

四.破釜沉舟

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

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

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

页面导入

Code

import React from 'react'
var title = 'Home Page'
export default class Repos extends React.Component {
    render() {
        return (
            <div>
                <h1>{title}</h1>
            </div>
        )
    }
}

大概这个格式,引入

import Home from './home'

然后就给component了

<Route exact path="/" component={Home} />

项目需求分析:

制作一个属于自己的个人简历网站,采用SPA架构进行开发;

  • 首页开发
    • 公共layout部分结合react-addons-css-transition-group实现css3过渡效果
    • 公共左侧导航组件开发,需结合使用react-router实现前端路由的控制
    • 底部页面切换和过渡组件开发
  • “关于我”页面,”专业技能”页面,”联系我”页面
    • 主要设计通用布局组件封装
    • 以及数据和组件的结合渲染
  • “项目经验”页面
    • 功能描述:需要使用github open
      Api将github上的个人项目信息拉取过来,并集合axios这个库封装公共方法,将数据抓取过来后进行展示
    • 需利用antd的Timeline组件进行项目展示组件封装,将数据导入展示;

五.片尾广告(请直接跳过)

个人小程序,欢迎体验:
金沙js333娱乐场 3

修改<App />
 <Router>
    <div>
      <h2>这是react-router渲染出来的</h2>
      <Route path="/:id" component={Child}/>
    </div>
  </Router>

可以看出来,router竟然是组件格式,很棒的设计。

NavMenu导航组件开发

  • NavMenu组件UI和路由
  • ant-design ->Menu+Icon
  • react-router ->Link
  • 复合组件
  • 组件样式
  • 新增fonts图标字体库美化组件展示
    • file-loader和url-loader安装
    • 以及webpack的配置
    • 组件中增加iconfont
    • 优化css
  • 实现collapse折叠功能
    • 控制组件的展示是否折叠,其实控制组件的对应状态即可;
      • state->collapse;
    • 对应的,通过collapse这个state来确定样式className;
      • collapse->className->样式
  • antd->Menu组件
    • mode
      菜单类型,现在支持垂直vertical、水平horizontal、和内嵌inline模式三种
    • selectedKeys 当前选中的菜单项 key 数组; string[]
    • defaultSelectedKeys
      解析url->拿到hash->hash值作为state传入组件-》selectKeys
      什么时候改变state -> componentDidUpdate

发表评论

电子邮件地址不会被公开。 必填项已用*标注