P23:React高级-CSS3实现react显示隐藏

Posted 2022-01-05 wgchen~

React16 基础

• 阐述
• 新建一个Boss组件
• 编写业务逻辑
• 加入CSS动画
• Demo
• • index.js
  • exp.css
  • Example.js
  • Boss.js

阐述

前端的动画技术发展到现在,完全可以独立出一个岗位。

我目前不属于动画岗，能力有限，也只是简单的给小伙伴们讲讲，做一些前端常用的效果。本文先用我们最熟悉的CSS3在React中制作一个显示隐藏的动画特效，注意这是用CSS3实现的，其实React只做了业务逻辑。

新建一个Boss组件

需要给 “服务菜单” 增加一个Boss服务人物，点击一下按钮就会自动出现 ”Boss级人物-孙悟空”，不要管什么恰当不恰当了，咱们是为了练习一下动画。在 src 文件夹下，新建一个Boss.js文件。然后用快速生成的方式生成基本结构：

在使用这些命令前，你要保证你安装了VSCode中的 Simple React Snippets插件。

先输入imrc,然后回车，这是为了用 import 引入 React 和 component。

再输入 ccc 然后回车,生成最基本的带 constructor 的代码结构。

就会生成下面的基本代码了（2秒钟完成下面的代码，这也是你工作中提高效率的关键）:

import React,  Component  from 'react';
class Boss extends Component 
    constructor(props) 
        super(props);
        this.state =   
    
    render()  
        return (  );
    


export default Boss;

然后我们先写一些JSX代码，让页面上有一段文字和一个按钮。代码如下：

import React,  Component  from 'react';
class Boss extends Component 
    constructor(props) 
        super(props);
        this.state =   
    
    render()  
        return ( 
            <div>
                <div>BOSS级人物-孙悟空</div>
                <div><button>召唤Boss</button></div>
            </div>
          );
    


export default Boss;

编写业务逻辑

目前组件没有任何业务逻辑，只有一个UI，这是没办法实现动画效果的。业务逻辑是点击按钮的时候可以改变字的 ’显示隐藏’。 要实现这个业务逻辑，先在 constructor 里增加 state值isShow，详情请看下面的代码。

this.state =  
    isShow:true

然后把 “BOSS级人物-孙悟空” 的部分，增加 className,并用 isShow 进行控制。

<div className=this.state.isShow ? 'show' : 'hide'>BOSS级人物-孙悟空</div>

需要点击按钮时，有响应的事件，所以需要一个方法，我们编写一个 toToggole() 方法，代码如下：

toToggole()
    this.setState(
        isShow:this.state.isShow ? false : true
    )

意思就是当 isShow 为 true 时，我们赋值 false;当isShow为 false 时，我们赋值true.

有了方法后，可以给<button>加上onClick响应事件了，代码如下：

<div><button onClick=this.toToggole>召唤Boss</button></div>

写完这个事件，还是需要到 constructor 里绑定一下this。代码如下：

constructor(props) 
    super(props);
    this.state =  
        isShow:true
    
    this.toToggole = this.toToggole.bind(this);

这样我们的基本业务逻辑就算写完了，可以把代码加入到 Beauty.js 组件中，看一下效果了。

加入CSS动画

在页面上看不出任何的效果，如果你打开浏览器控制台是可以看到每次点击按钮，class都会变化的。界面没变化，只是我们没有写CSS。现在可以在 exp.css 里写样式，

代码如下:

.show opacity: 1; transition:all 1.5s ease-in;
.hide opacity: 0; transition:all 1.5s ease-in;

这样就用CSS3实现了React中动画，如下图

这知识最简单的实践动画，所以先不要吐槽，接下来我们会继续讲解React中动画的知识。

Demo

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './Example'
ReactDOM.render(<App />,document.getElementById('root'))

exp.css

.showfont-size: 28px;color:brown;
.show opacity: 1; transition:all 1.5s ease-in;
.hide opacity: 0; transition:all 1.5s ease-in;

Example.js

import React,  Component  from 'react';
import Boss from './Boss';

class Example extends Component 
    constructor(props) 
        super(props);
        this.state =   
    
    render()  
        return ( 
            <Boss />
         );
    

 
export default Example;

Boss.js

import React,  Component  from 'react';
import './exp.css'

class Boss extends Component 
    constructor(props) 
        super(props);
        this.state =  
            isShow:true
        
        this.toToggole = this.toToggole.bind(this);
    
    render()  
        return ( 
            <div>
                <div className=this.state.isShow ? 'show' : 'hide'>BOSS级人物-孙悟空</div>
                <div><button onClick=this.toToggole>召唤Boss</button></div>
            </div>    
         );
    
    toToggole()
        this.setState(
            isShow:this.state.isShow ? false : true
        )
    

 
export default Boss;