18720358503 在线客服 人才招聘 返回顶部
企业动态 技术分享 行业动态

构建小程序流程商城_react使用CSS完成react动画功用

2021-01-05分享 "> 对不起,没有下一图集了!">
react使用CSS实现react动画功能示例       这篇文章主要介绍了react使用CSS实现react动画功能,结合实例形式分析了react使用CSS实现react动画功能具体步骤与实现方法,需要的朋友可以参考下

本文实例讲述了react使用CSS实现react动画功能。分享给大家供大家参考,具体如下:

react动画:

import React, { Component } from 'react';
class Boss extends Component {
 constructor(pro凡科抠图) {
 super(pro凡科抠图);
 this.state = {
 isShow:true
 this.toTogger=this.toTogger.bind(this)
 render() { 
 return ( 
 div 
 div className={this.state.isShow 'show':'hide'} 大BOSS--孙悟空 /div 
 div button this.toTogger} 召唤 /button /div 
 /div 
 toTogger() {
 this.setState({
 isShow:this.state.isShow false:true
export default Boss;

css:

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

keyframes动画:

.hide{animation: hide-item 2s ease-in forwards;}
.show{animation: show-item 2s ease-in forwards;}
@keyframes hide-item{
 opacity: 0;
 color: red;
 50%{
 opacity: 0.5;
 color: saddlebrown;
 100%{
 opacity: 1;
 color: yellow;
@keyframes show-item{
 opacity: 1;
 color:green;
 50%{
 opacity: 0.5;
 color:greenyellow;
 100%{
 opacity: 0;
 color: yellow;

react-transition-group动画库:

import {CSSTransition} from 'react-transition-group'; 
render() { 
 return ( 
 div 
 CSSTransition
 in={this.state.isShow}
 timeout={2000}
 classNames="boss-text"
 unmountOnExit
 {/* div className={this.state.isShow 'show':'hide'} 大BOSS--孙悟空 /div */}
 div 大BOSS--孙悟空 /div 
 /CSSTransition 
 div button this.toTogger} {this.state.btn} /button /div 
 /div 

.boss-text-enter{opacity: 0;} .boss-text-enter-active{opacity: 1;transition: opacity 2000ms;} .boss-text-enter-done{opacity: 1;} .boss-text-exit{opacity: 1;} .boss-text-exit-active{opacity: 0;transition: opacity 2000ms;} .boss-text-exit-done{opacity: 0;}

多DOM动画:

import React, { Component, Fragment } from 'react';
import List from './List.js';
import axios from 'axios';
import Boss from './Boss';
import {CSSTransition,TransitionGroup} from 'react-transition-group'
class Test extends Component {
 constructor(pro凡科抠图) {
 super(pro凡科抠图);
 this.state={
 inputValue:'aaa',
 list:[],
 // this.add=this.add.bind(this);
 addList() {
 this.setState({
 list:[...this.state.list,this.state.inputValue],
 inputValue:''
 change(e) {
 this.setState({
 // inputValue:e.target.value
 inputValue:this.input.value
 delete(i) {
 // console.log(i);
 const list = this.state.list;
 list.splice(i,1);
 this.setState({
 list:list
 componentDidMount() {
 // console.log('componentDidMount');
 axios.get('mock/5e1d3d1564a3c20d7f366f91/ReactDemo1/App')
 .then((res)= {
 console.log('获取数据'+JSON.stringify(res));
 this.setState({
 list:res.data.data
 .catch((error)= {console.log('获取数据失败'+error)});
 render() { 
 console.log('3-render');
 return (
 Fragment 
 div 
 input ref={(input)= {this.input=input}} value={this.state.inputValue} onChange={this.change.bind(this)}/ 
 button this.addList.bind(this)} 添加 /button 
 /div 
 TransitionGroup 
 this.state.list.map((v,i)= {
 return(
 CSSTransition
 timeout={2000}
 classNames='boss-text'
 unmountOnExit
 key={i}
 List key={i} content={v} index={i} delete={this.delete.bind(this)} / 
 /CSSTransition 
 /TransitionGroup 
 /ul 
 Boss/ 
 /Fragment 
export default Test;

希望本文所述对大家react程序设计有所帮助。


"> 对不起,没有下一图集了!">
在线咨询