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

﹏ヽ暗。殇╰゛Y 2023-10-06 20:52 6阅读 0赞

#### 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中动画，如下图

![在这里插入图片描述][6fe87e6a17fb4ca6b7e66e5eb9adf991.gif_pic_center]  
这知识最简单的实践动画，所以先不要吐槽，接下来我们会继续讲解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 ###

.show{
        font-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;

[6fe87e6a17fb4ca6b7e66e5eb9adf991.gif_pic_center]: https://img-blog.csdnimg.cn/6fe87e6a17fb4ca6b7e66e5eb9adf991.gif#pic_center