React过度动画和中CSS的常见的三种方式

六、React中的CSS使用

React的过渡动画

◼ 在开发中，我们想要给一个组件的显示和消失添加某种过渡动画，可以很好的增加用户体验。

◼ 当然，我们可以通过原生的CSS来实现这些过渡动画，但是React社区为我们提供了react-transition-group用来完成过渡动画。

◼ React曾为开发者提供过动画插件 react-addons-css-transition-group，后由社区维护，形成了现在的 react-transitiongroup。

• 这个库可以帮助我们方便的实现组件的 入场 和 离场 动画，使用时需要进行额外的安装：

# npm
npm install react-transition-group --save
# yarn
yarn add react-transition-group

◼ react-transition-group本身非常小，不会为我们应用程序增加过多的负担。

react-transition-group主要包含四个组件：

• Transition

  • 该组件是一个和平台无关的组件（不一定要结合CSS）；
  • 在前端开发中，我们一般是结合CSS来完成样式，所以比较常用的是CSSTransition；

• CSSTransition

  • 在前端开发中，通常使用CSSTransition来完成过渡动画效果

• SwitchTransition

  • 两个组件显示和隐藏切换时，使用该组件

• TransitionGroup

  • 将多个动画组件包裹在其中，一般用于列表中元素的动画；

CSSTransiton使用

◼ CSSTransition是基于Transition组件构建的：

◼ CSSTransition执行过程中，有三个状态：appear、enter、exit；

◼ 它们有三种状态，需要定义对应的CSS样式：

• 第一类，开始状态：对于的类是-appear、-enter、exit；
• 第二类：执行动画：对应的类是-appear-active、-enter-active、-exit-active；
• 第三类：执行结束：对应的类是-appear-done、-enter-done、-exit-done；

◼ CSSTransition常见对应的属性：

◼ in：触发进入或者退出状态

• 如果添加了unmountOnExit={true}，那么该组件会在执行退出动画结束后被移除掉；
• 当in为true时，触发进入状态，会添加-enter、-enter-acitve的class开始执行动画，当动画执行结束后，会移除两个class，并且添加-enter-done的class；
• 当in为false时，触发退出状态，会添加-exit、-exit-active的class开始执行动画，当动画执行结束后，会移除两个class，并且添加-enter-done的class；

常见的属性设置

◼ classNames：动画class的名称

• 决定了在编写css时，对应的class名称：比如card-enter、card-enter-active、card-enter-done；

◼ timeout：

• 过渡动画的时间

◼ appear：

• 是否在初次进入添加动画（需要和in同时为true）

◼ unmountOnExit：退出后卸载组件

◼ 其他属性可以参考官网来学习：

• reactcommunity.org/react-trans…

◼ CSSTransition对应的钩子函数：主要为了检测动画的执行过程，来完成一些JavaScript的操作

• onEnter：在进入动画之前被触发；
• onEntering：在应用进入动画时被触发；
• onEntered：在应用进入动画结束后被触发；

App.jsx

import React, { createRef, PureComponent } from "react";
import { CSSTransition } from "react-transition-group";
import "./style.css";
​
export class App extends PureComponent {
  constructor() {
    super();
​
    this.state = {
      isShow: true,
    };
    this.sectionRef = createRef();
  }
  render() {
    const { isShow } = this.state;
    return (
      <div>
        <button onClick={(e) => this.setState({ isShow: !isShow })}>
          切换
        </button>
        {/* {isShow && <h2>哈哈哈</h2>} */}
        <CSSTransition
          nodeRef={this.sectionRef}
          in={isShow}
          unmountOnExit={true}
          classNames="lyc"
          timeout={2000}
          appear
          onEnter={(e) => console.log("开始进入动画")}
          onEntering={(e) => console.log("正在执行动画")}
          onEntered={(e) => console.log("执行进入结束")}
          onExit={(e) => console.log("开始离开动画")}
          onExiting={(e) => console.log("执行离开动画")}
          onExited={(e) => console.log("离开动画结束")}
        >
          <div className="section" ref={this.sectionRef}>
            <h2>哈哈哈</h2>
            <p>哈哈哈哈哈</p>
          </div>
        </CSSTransition>
      </div>
    );
  }
}
​
export default App;

style.css

/* 进入动画 */
/* .lyc-appear {
  transform: translateX(-150px);
}
​
.lyc-appear-active {
  transform: translateX(0);
  transition: transform 2s ease;
} */
​
.lyc-appear .lyc-enter {
  opacity: 0;
}
​
.lyc-appear-active .lyc-enter-active {
  opacity: 1;
  transition: opacity 2s ease;
}
​
/* 离开动画 */
.lyc-exit {
  opacity: 1;
}
.lyc-exit-active {
  opacity: 0;
  transition: opacity 2s ease;
}

SwitchTransition

◼ SwitchTransition可以完成两个组件之间切换的炫酷动画：

• 比如我们有一个按钮需要在on和off之间切换，我们希望看到on先从左侧退出，off再从右侧进入；
• 这个动画在vue中被称之为 vue transition modes；
• react-transition-group中使用SwitchTransition来实现该动画；

◼ SwitchTransition中主要有一个属性：mode，有两个值

• in-out：表示新组件先进入，旧组件再移除；
• out-in：表示就组件先移除，新组建再进入；

◼ 如何使用SwitchTransition呢？

• SwitchTransition组件里面要有CSSTransition或者Transition组件，不能直接包裹你想要切换的组件；
• SwitchTransition里面的CSSTransition或Transition组件不再像以前那样接受in属性来判断元素是何种状态，取而代之的是key属性；

App.jsx

import React, { PureComponent } from "react";
import { SwitchTransition, CSSTransition } from "react-transition-group";
import "./style.css";
​
export class App extends PureComponent {
  constructor() {
    super();
​
    this.state = {
      isLogin: true,
    };
  }
  render() {
    const { isLogin } = this.state;
    return (
      <div>
        <SwitchTransition mode="out-in">
          <CSSTransition
            key={isLogin ? "exit" : "login"}
            classNames="login"
            timeout={1000}
          >
            <button onClick={(e) => this.setState({ isLogin: !isLogin })}>
              {isLogin ? "退出" : "登录"}
            </button>
          </CSSTransition>
        </SwitchTransition>
      </div>
    );
  }
}
​
export default App;

style.css

.login-enter {
  transform: translateX(100px);
  opacity: 0;
}
​
.login-enter-active {
  transform: translateX(0);
  opacity: 1;
  transition: all 1s ease;
}
​
.login-exit {
  transform: translateX(0);
  opacity: 1;
}
​
.login-exit-active {
  transform: translateX(-100px);
  opacity: 0;
  transition: all 1s ease;
}

TransitionGroup

当我们有一组动画时，需要将这些CSSTransition放入到一个TransitionGroup中来完成动画：

App.jsx

import React, { PureComponent } from "react";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import "./style.css";
​
export class App extends PureComponent {
  constructor() {
    super();
​
    this.state = {
      books: [
        { id: 111, name: "你不知道的JS", price: 99 },
        { id: 222, name: "JS高级程序设计", price: 89 },
        { id: 333, name: "Vue高级设计", price: 77 },
      ],
    };
  }
​
  addNewBook() {
    const books = [...this.state.books];
    books.push({
      id: new Date().getTime(),
      name: "React高级程序设计",
      price: 98,
    });
    this.setState({ books });
  }
  removeBoos(index) {
    const books = [...this.state.books];
    books.splice(index, 1);
    this.setState({ books });
  }
​
  render() {
    const { books } = this.state;
    return (
      <div>
        <h2>书籍列表：</h2>
        <TransitionGroup component="ul">
          {books.map((item, index) => {
            return (
              <CSSTransition key={item.id} classNames="book" timeout={1000}>
                <li>
                  {item.name}-{item.price}
                  <button onClick={(e) => this.removeBoos(index)}>删除</button>
                </li>
              </CSSTransition>
            );
          })}
        </TransitionGroup>
        <button onClick={(e) => this.addNewBook()}>添加新书籍</button>
      </div>
    );
  }
}
​
export default App;
​

style.css

.book-enter {
  transform: translateX(100px);
  opacity: 0;
}
​
.book-enter-active {
  transform: translateX(0);
  opacity: 1;
  transition: all 1s ease;
}
​
.book-exit {
  transform: translateX(0);
  opacity: 1;
}
​
.book-exit-active {
  transform: translateX(100px);
  opacity: 0;
  transition: all 1s ease;
}

React中CSS

◼ 事实上，css一直是React的痛点，也是被很多开发者吐槽、诟病的一个点。

◼ 在这一点上，Vue做的要好于React：

• Vue通过在.vue文件中编写 < style>< style> 标签来编写自己的样式；
• 通过是否添加 scoped 属性来决定编写的样式是全局有效还是局部有效；
• 通过 lang 属性来设置你喜欢的 less、sass等预处理器；
• 通过内联样式风格的方式来根据最新状态设置和改变css；
• 等等...

◼ Vue在CSS上虽然不能称之为完美，但是已经足够简洁、自然、方便了，至少统一的样式风格不会出现多个开发人员、多个项目采用不一样的样式风格。

◼ 相比而言，React官方并没有给出在React中统一的样式风格：

• 由此，从普通的css，到css modules，再到css in js，有几十种不同的解决方案，上百个不同的库；
• 大家一致在寻找最好的或者说最适合自己的CSS方案，但是到目前为止也没有统一的方案；

内联样式CSS写法

◼ 内联样式是官方推荐的一种css样式的写法：

• style 接受一个采用小驼峰命名属性的 JavaScript 对象，而不是 CSS 字符串；
• 并且可以引用state中的状态来设置相关的样式；

◼ 内联样式的优点:

• 1.内联样式, 样式之间不会有冲突
• 2.可以动态获取当前state中的状态

◼ 内联样式的缺点：

• 1.写法上都需要使用驼峰标识
• 2.某些样式没有提示
• 3.大量的样式, 代码混乱
• 4.某些样式无法编写(比如伪类/伪元素)

import React, { PureComponent } from 'react'
​
export class App extends PureComponent {
  constructor() {
    super()
​
    this.state = {
      titleSize: 30
    }
  }
​
  addTitleSize() {
    this.setState({ titleSize: this.state.titleSize + 2 })
  }
​
  render() {
    const { titleSize } = this.state
    return (
      <div>
        <button onClick={e => this.addTitleSize()}>增加titleSize</button>
        <h2 style={{ color: "red", fontSize: `${titleSize}px` }}>我是标题</h2>
        <p style={{ color: "blue", fontSize: "20px" }}>我是内容，哈哈哈</p>
      </div>
    )
  }
}
​
export default App

普通CSS文件写法

◼ 普通的css我们通常会编写到一个单独的文件，之后再进行引入。

◼ 这样的编写方式和普通的网页开发中编写方式是一致的：

• 如果我们按照普通的网页标准去编写，那么也不会有太大的问题；
• 但是组件化开发中我们总是希望组件是一个独立的模块，即便是样式也只是在自己内部生效，不会相互影响；
• 但是普通的css都属于全局的css，样式之间会相互影响；

◼ 这种编写方式最大的问题是样式之间会相互层叠掉

import React, { PureComponent } from "react";
import "./App.css";
import Home from "./Home/Home";
import Profile from "./Profile/Profile";
​
export class App extends PureComponent {
  render() {
    return (
      <div>
        <h2 className="title">我是标题</h2>
        <p className="content">我是内容，哈哈哈</p>
        <Home />
        <Profile />
      </div>
    );
  }
}
​
export default App;

CSS Module写法

◼ css modules并不是React特有的解决方案，而是所有使用了类似于webpack配置的环境下都可以使用的。

• 如果在其他项目中使用它，那么我们需要自己来进行配置，比如配置webpack.config.js中的modules: true等。

◼ React的脚手架已经内置了css modules的配置：

• .css/.less/.scss 等样式文件都需要修改成 .module.css/.module.less/.module.scss 等；
• 之后就可以引用并且进行使用了；

◼ css modules确实解决了局部作用域的问题，也是很多人喜欢在React中使用的一种方案。

◼ 但是这种方案也有自己的缺陷：

• 引用的类名，不能使用连接符(.home-title)，在JavaScript中是不识别的；
• 所有的className都必须使用{style.className} 的形式来编写；
• 不方便动态来修改某些样式，依然需要使用内联样式的方式；

◼ 如果你觉得上面的缺陷还算OK，那么你在开发中完全可以选择使用css modules来编写，并且也是在React中很受欢迎的一种方式。

import React, { PureComponent } from "react";
import Home from "./Home/Home";
import Profile from "./Profile/Profile";
​
import appStyle from "./App.module.css";
​
export class App extends PureComponent {
  render() {
    return (
      <div>
        <h2 className={appStyle.title}>我是标题</h2>
        <p className={appStyle.content}>我是内容，哈哈哈</p>
        <Home />
        <Profile />
      </div>
    );
  }
}
​
export default App;

CSS in JS解决方案

◼ 官方文档也有提到过CSS in JS这种方案：

• “CSS-in-JS” 是指一种模式，其中 CSS 由 JavaScript 生成而不是在外部文件中定义；
• 注意此功能并不是 React 的一部分，而是由第三方库提供；
• React 对样式如何定义并没有明确态度；

◼ 在传统的前端开发中，我们通常会将结构（HTML）、样式（CSS）、逻辑（JavaScript）进行分离。

• 但是在前面的学习中，我们就提到过，React的思想中认为逻辑本身和UI是无法分离的，所以才会有了JSX的语法。
• 样式呢？ 样式也是属于UI的一部分；
• 事实上CSS-in-JS的模式就是一种将样式（CSS）也写入到JavaScript中的方式，并且可以方便的使用JavaScript的状态；
• 所以React有被人称之为 All in JS；

认识styled-components

◼ 批评声音虽然有，但是在我们看来很多优秀的CSS-in-JS的库依然非常强大、方便：

• CSS-in-JS通过JavaScript来为CSS赋予一些能力，包括类似于CSS预处理器一样的样式嵌套、函数定义、逻辑复用、动态修

改状态等等；

• 虽然CSS预处理器也具备某些能力，但是获取动态状态依然是一个不好处理的点；
• 所以，目前可以说CSS-in-JS是React编写CSS最为受欢迎的一种解决方案；

◼ 目前比较流行的CSS-in-JS的库有哪些呢？

• styled-components
• emotion
• glamorous

◼ 目前可以说styled-components依然是社区最流行的CSS-in-JS库，所以我们以styled-components的讲解为主；

◼ 安装styled-components：

pnpm install styled-components

styled的基本使用

◼ styled-components的本质是通过函数的调用，最终创建出一个组件：

• 这个组件会被自动添加上一个不重复的class；
• styled-components会给该class添加相关的样式；

◼ 另外，它支持类似于CSS预处理器一样的样式嵌套：

• 支持直接子代选择器或后代选择器，并且直接编写样式；
• 可以通过&符号获取当前元素；
• 直接伪类选择器、伪元素等；

import React, { PureComponent } from "react";
import { AppWrapper, SectionWrapper } from "./style";
import Home from "./home";
​
export class App extends PureComponent {
  constructor() {
    super();
​
    this.state = {
      size: 30,
      color: "yellow",
    };
  }
  render() {
    const { size, color } = this.state;
    return (
      <AppWrapper>
        <SectionWrapper size={size} color={color}>
          <h2 className="title">我是标题</h2>
          <p className="content">我是内容，红红火火恍恍惚惚</p>
          <button onClick={(e) => this.setState({ color: "skyblue" })}>
            修改颜色
          </button>
        </SectionWrapper>
​
        <Home />
​
        <div className="footer">
          <p>免责声明</p>
          <p>版权声明</p>
        </div>
      </AppWrapper>
    );
  }
}
​
export default App;

props、attrs属性

◼ props可以传递

  <SectionWrapper size={size} color={color}>

◼ props可以被传递给styled组件

• 获取props需要通过${}传入一个插值函数，props会作为该函数的参数；
• 这种方式可以有效的解决动态样式的问题；

◼ 添加attrs属性

style.js

import styled from "styled-components";
import * as vars from "./style/variables.js"
​
// 1.基本使用
export const AppWrapper = styled.div`
  .footer{
    border:1px solid orange;
  }
`
​
// 2.子元素单独抽离到一个组件
// 3.可以接受外部传入的props
// 4.可以通过attrs给标签模板字符串中提供的属性
// 5.从一个单独的文件中引入变量
export const SectionWrapper = styled.div.attrs(props => {
  return {
    tColor: props.color || "blue"
  }
})`
    border:1px solid red;
​
    .title{
      font-size: ${props => props.size}px;
      color: ${props => props.tColor};
​
      &:hover{
        background-color: purple;
      }
    }
​
    .content{
      font-size: ${vars.largeSize}px;
      color: ${vars.primaryColor};
    }
`

css的公共内容

在index.js中引入ThemeProvider，在style.js中调用${props => props.theme.color}

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import { ThemeProvider } from 'styled-components';
​
import App from './06_classnames库/App';
​
​
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <ThemeProvider theme={{ color: "red", size: "50px" }}>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

style.js

import styled from "styled-components";
​
// 6.css的继承
const HYButton = styled.button`
  border: 1px solid red;
  border-radius: 5px;
`
export const HYButtonWrapper = styled(HYButton)`
  background-color: #0f0;
  color: #fff;
` 
​
export const HomeWrapper = styled.div`
  .top {
    .banner {
      color: red;
    }
  }
​
  .bottom {
    .header {
      color: ${props => props.theme.color};
      font-size: ${props => props.theme.size};
    }
​
    .product-list {
      .item {
        color: blue;
      }
    }
  }
`
​

styled高级特性

• 子元素单独抽离到一个组件
• 可以接受外部传入的props
• 可以通过attrs给标签模板字符串中提供的属性
• 从一个单独的文件中引入变量
• css的继承

React中添加class

◼ React在JSX给了我们开发者足够多的灵活性，你可以像编写JavaScript代码一样，通过一些逻辑来决定是否添加某些class：

render() {
    const { isbbb, isccc } = this.state;
    const classList = ["aaa"];
    if (isbbb) classList.push("bbb");
    if (isccc) classList.push("ccc");
    const classname = classList.join(" ");
​
    return (
      <div>
        <h2 className={`aaa ${isbbb ? "bbb" : ""} ${isccc ? "ccc" : ""}`}>
          哈哈哈
        </h2>
        <h2 className={classname}>嘿嘿嘿</h2>
      </div>
    );
  }

◼ 这个时候我们可以借助于一个第三方的库：* classnames*

• 很明显，这是一个用于动态添加classnames的一个库。

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

在TSX里面使用Css in JS

引入npm包

pnpm add styled-components @types/styled-components

再像普通的css in js 一样使用，但是要将style后缀改为tsx

import styled from "styled-components";
export const LoginWrapper = styled.div`
  display: flex;
  align-content: center;
  justify-content: center;
`