React-高级内容之动画效果

博客介绍了实现过渡和动画效果的方法,包括使用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;
	}
}

3、使用react-transition-group库,实现动画

官网-https://github.com/reactjs/react-transition-group

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值