(31)React 拓展——① React 中使用 CSS3 过渡和动画 | React 基础理论实操

复制代码
转载请注明出处,未经同意,不可修改文章内容。

🔥🔥🔥"前端一万小时"两大明星专栏------"从零基础到轻松就业"、"前端面试刷题",已于本月大改版,合二为一,干货满满,欢迎点击公众号菜单栏各模块了解。

1 React 中使用 CSS3 过渡效果

❗️为了便于讲解,请将代码切换至《React 初识------③ React 中的组件和 JSX 初识》的版本!

进入 App.js 文件,再写一个 toggle 按钮:

jsx 复制代码
import React, { Component, Fragment } from "react";  

class App extends Component  {
  render() {
    return (
      <Fragment>
        <div>
          hello, qdywxs.
        </div>
        <button>toggle</button>
      </Fragment>
    );
  }
}

export default App;

❓需求:我希望点击 toggle 按钮时, hello, qdywxs. 能有一个"展示"和"隐藏"的效果。 答:

打开 App.js 文件:

jsx 复制代码
import React, { Component, Fragment } from "react";  

class App extends Component  {
  constructor(props) { 
    super(props);
    
    this.state = {
      show: true // 1️⃣首先,定义一个状态 show,默认是"显示"的;
    }
    
    this.handleBtnToggle = this.handleBtnToggle.bind(this); // ❗️在这里改变 this 指向!
  }
  
  render() {
    return (
      <Fragment>
      
        {/*
         2️⃣给 div 标签添加一个 className 属性:
         如果 show 是 true,则属性值为 show;
         如果 show 为 false,则属性值为 hide。
          */}
        <div className={this.state.show ? "show" : "hide"}>hello, qdywxs.</div>

				{/* 3️⃣给按钮绑定一个"点击"事件(❗️记得在上边去改变 this 指向); */}
        <button onClick={this.handleBtnToggle}>toggle</button>
      </Fragment>
    );
  }
  
  // 4️⃣将事件方法写在这里(❗️注意看逻辑是怎样的~);
  handleBtnToggle() {
    this.setState({
      show: this.state.show ? false : true
    })
  }
}

export default App;

返回页面查看控制台( div 元素的 class 名字真的随"点击"在不停的改变):

5️⃣既然实现了 class 名字的切换,我们就可以借助 class 名字来实现动画效果:

5️⃣-①:在 src 目录下创建一个 style.css 文件;

5️⃣-②:然后在 App.js 文件中去引入这个样式;

jsx 复制代码
import React, { Component, Fragment } from "react";  

import "./style.css"; // ❗️引入样式!

class App extends Component  {
  constructor(props) { 
    super(props);
    
    this.state = {
      show: true  
    }
    
    this.handleBtnToggle = this.handleBtnToggle.bind(this); 
  }
  
  render() {
    return (
      <Fragment>

        <div className={this.state.show ? "show" : "hide"}>hello, qdywxs.</div>

        <button onClick={this.handleBtnToggle}>toggle</button>
      </Fragment>
    );
  }
  
  handleBtnToggle() {
    this.setState({
      show: this.state.show ? false : true
    })
  }
}

export default App;

5️⃣-③:在 style.css 文件中编写样式代码;

🔗前置知识:《CSS------CSS 拓展:⑤ CSS3 Transition》

css 复制代码
.show {
  opacity: 1;
  transition: all 1s ease-in; /* ❗️其他"过渡"样式,大家可以自己尝试! */
} 

.hide {
  opacity: 0;
  transition: all 1s ease-in;
}

返回页面查看效果:

2 React 中使用 CSS3 动画效果

❓需求:我想让"隐藏"的效果更丰富些应该怎么做呢? 答:

紧接上边的代码,打开 style.css 文件编写动画效果。

🔗前置知识:《CSS------CSS 拓展:⑦ CSS3 Animation》

css 复制代码
.show {
  animation: show-item 2s ease-in forwards;
}

.hide {
  animation: hide-item 2s ease-in forwards;
}

@keyframes show-item {
  0% {
    opacity: o;
    color: red;
  }
  50% {
    opacity: 0.5;
    color: green;
  }
  100% {
    opacity: 1;
    color: blue;
  }
}

@keyframes hide-item {
  0% {
    opacity: 1;
    color: red;
  }
  50% {
    opacity: 0.5;
    color: green;
  }
  100% {
    opacity: 0;
    color: blue;
  }
}

返回页面查看效果:

祝好,qdywxs ♥ you!

相关推荐
Martin-Luo1 分钟前
Vue3 通过json配置生成查询表单
javascript·vue.js·json
梦想CAD控件2 分钟前
(在线CAD平台)网页集成CAD SDK的方法
前端·javascript·github
用户7678797737323 分钟前
后端转全栈之Next.js文件约定
react.js·next.js
万少4 分钟前
可可图片编辑 HarmonyOS(6)水印效果
前端·harmonyos
掘金约基奇_4 分钟前
JS-SDK开发企微侧边栏
前端·javascript
FlowGram11 分钟前
低代码设计态变量挑战与设计 — 前端变量引擎介绍
前端·低代码
大西瓜瓜瓜17 分钟前
PS2020,将所有图片不剪切,调整为800×800像素的文档尺寸。
前端
sjin19 分钟前
React源码 - 大名鼎鼎的Fiber
前端
子兮曰20 分钟前
🚀从单体到Monorepo:四川省xxx协会官网架构重生记
前端·next.js·turbopack
bosscheng21 分钟前
0到1理解web音视频从采集到传输到播放系列之《Jessibuca系列篇音视频解封装》
javascript·音视频开发