React中实现CSS过渡动画及使用动画效果

fanxiao_168

于 2019-07-09 20:12:02 发布

阅读量1.8k

点赞数

分类专栏： React 文章标签： css过渡动画 react-transition-group

本文链接：https://blog.youkuaiyun.com/weixin_42206243/article/details/95230778

版权

本文介绍了如何在React应用中利用react-transition-group库来创建CSS过渡动画。通过详细步骤展示了如何安装库、配置样式文件style.css以及在App.js中实现组件的动画效果。每次点击toggle按钮，item元素将带有动画地展示出来。

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

在这里插入图片描述

style.css

.show {
	/*opacity: 1;
	transition: all 0.1s ease-in;*/
	animation: show-item 2s ease-in forwards;
}

.hide {
	/*opacity: 0;
	transition: all 0.1s ease-in;*/
	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;
	}
}

App.js

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


class App extends Component {
	
	constructor(props){
		super(props);
		this.state = {
			show : tr