React-高级内容之动画效果

最新推荐文章于 2025-05-27 16:14:40 发布

jackaroo2020

最新推荐文章于 2025-05-27 16:14:40 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端工程师

本文链接：https://blog.youkuaiyun.com/qq3399013670/article/details/93330087

前端工程师专栏收录该内容

30 篇文章

订阅专栏

博客介绍了实现过渡和动画效果的方法，包括使用CSS实现过渡效果、CSS实现动画效果，还提及使用react - transition - group库实现动画，并给出该库官网链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、使用css实现过渡效果

style.css

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

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

App.js

import React,{Component,Fragment} from "react";
import './style.css';

class App extends Component{
	constructor(props){
		super(props);
		this.state = {
			show: true,
		}
		this.handleToggle = this.handleToggle.bind(this);
	}
	
	render(){
		return(
		<Fragment>
			<div className={this.state.show?'show':'hide'}>Test</div>
			<button onClick={this.handleToggle}>toggle</button>
	    </Fragment>
		);
	}
	
	handleToggle(){
		this.setState({
			show: this.state.show?false:true,
		});
	}

}
export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'

ReactDOM.render(
	<App />,
	document.getElementById('root')
);

2、使用css实现动画效果

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

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

@keyframes show-item{
	0% {
		opacity: 0;
		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;
	}
}