react使用CSS實現(xiàn)react動畫功能的方法
這篇文章主要講解了react使用CSS實現(xiàn)react動畫功能的方法，內(nèi)容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
創(chuàng)新互聯(lián)是專業(yè)的襄陽網(wǎng)站建設公司，襄陽接單;提供成都做網(wǎng)站、網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設,網(wǎng)頁設計,網(wǎng)站設計,建網(wǎng)站,PHP網(wǎng)站建設等專業(yè)做網(wǎng)站服務;采用PHP框架,可快速的進行襄陽網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!
react動畫：
import React, { Component } from 'react';
class Boss extends Component {
constructor(props) {
super(props);
this.state = {
isShow:true
}
this.toTogger=this.toTogger.bind(this)
}
render() {
return (
<div>
<div className={this.state.isShow?'show':'hide'}>大BOSS--孫悟空</div>
<div><button onClick={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{
0%{
opacity: 0;
color: red;
}
50%{
opacity: 0.5;
color: saddlebrown;
}
100%{
opacity: 1;
color: yellow;
}
}
@keyframes show-item{
0%{
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 onClick={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(props) {
super(props);
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('https://www.easy-mock.com/mock/5e1d3d1564a3c20d7f366f91/ReactDemo1/App')
.then((res)=>{
console.log('獲取數(shù)據(jù)'+JSON.stringify(res));
this.setState({
list:res.data.data
});
})
.catch((error)=>{console.log('獲取數(shù)據(jù)失敗'+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 onClick={this.addList.bind(this)}>添加</button>
</div>
<ul>
<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;看完上述內(nèi)容，是不是對react使用CSS實現(xiàn)react動畫功能的方法有進一步的了解，如果還想學習更多內(nèi)容，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
網(wǎng)頁標題：react使用CSS實現(xiàn)react動畫功能的方法
本文URL：http://www.chinadenli.net/article34/geigse.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、定制網(wǎng)站、網(wǎng)站設計公司、自適應網(wǎng)站、面包屑導航、小程序開發(fā)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)
