1.引入
import {CSSTransition, TransitionGroup} from 'react-transition-group'
2.单个元素的动画
一个元素的显示隐藏：需要用CSSTransition将动画的元素包裹起来
<CSSTransition
in={this.state.show} // 一个是否执行动画的标准，当in的值为true就开始执行入场动画，in的值为false就开始执行出场动画
timeout={1000} //执行一个动画的时间1秒
classNames='fade' //动画的class名称，为了描述具体动画做准备
unMountOnExit //为true 代表退出的时候移除dom
appear={true} // 为true 渲染的时候就直接执行动画，默认false，
onEntered={(el) => {
el.style.color='blue' //可选，动画入场之后的回调，el指被包裹的dom，让div内的字体颜色等于蓝色
}}
onExited={() => {
xxxxx //同理，动画出场之后的回调，也可以在这里来个setState啥的操作
}}
onEnter={this.onEnter}
onEntering={this.onEntering}
onExit={this.onExit}
onExiting={this.onExiting}
addEndListener={this.addaddEndListener}
>
<div>hello</div>//需要动画的元素
</CSSTransition>
CSSTransition包裹的元素可以使用class的钩子函数控制动画的形式
/* 入场动画 fade-appear fade-appear-active 第一次才游泳*/
.fade-enter, .fade-appear{
opacity: 0;
}
.fade-enter-active, .fade-appear-active{
opacity: 1;
transition: opacity 1s ease-in;
}
.fade-enter-done{
opacity: 1;
}
/* 出场动画 */
.fade-exit{
opacity: 1;
}
.fade-exit-active{
opacity: 0;
transition: opacity 1s ease-in;
}
.fade-exit-done{
opacity: 0;
}
3.一组元素的动画 使用TransitionGroup
- 注意key
- TransitionGroup只能包裹CSSTransition组件不能识别其他元素
<TransitionGroup>
{
this.state.list.map((item, index)=>{
return (
<CSSTransition
key = {item.id}
timeout={1000}
classNames="fade"
unmountOnExit
appear={true}
>
<div key={index}>{item}</div>
</CSSTransition>
)
})
}
</TransitionGroup>
4.数字滚动效果的实现
原理是：
每个数字由一张竖向的由0-9的图片改变位置来实现滚动，
注意千分符和小数点等其他字符串的单独处理
import React, {Component} from 'react'
import {CSSTransition, TransitionGroup} from 'react-transition-group'
import './style.scss'
class RollNumber extends Component {
state = {
delay: this.props.interval || 100,
data: [],
};
componentDidMount(){
this.setState(()=>({
data: this.props.str.toString().split('')
}))
}
componentWillReceiveProps(nextProps) {
if (nextProps.str !== this.props.str && nextProps.str !== 'undefined') {
console.log(nextProps.str.toString(),17);
this.setState({
data: nextProps.str.toString().split('')
})
}
}
render() {
let {star}=this.state;
return (
<div
style={{...this.props.style}}
className="text-animation"
ref={ref => (this.ref = ref)}
>
<TransitionGroup className="text-list">
{this.state.data.map((val, index) => {
if(!/\d/.test(val)){
return <CSSTransition className={'nobg'} key={val+index} in={star} timeout={500}><span>{val}</span></CSSTransition>
}
return (
<CSSTransition
in={star}
key={val+index}
timeout={500}
onEnter={e => {
e.style.backgroundPositionY=`0`
}}
onEntering={
e => {
e.style.backgroundPositionY=`${-22*val - 220}px`;
e.style.transitionProperty="background-position-y";
e.style.transitionDuration=`${(index+1)*this.state.delay}ms`;
e.style.transitionTimingFunction="ease-out"
}
}
onExiting={(e)=>{
e.style.display='none';
}}
>
<span/>
</CSSTransition>
)
})}
</TransitionGroup>
</div>
)
}
}
export default RollNumber
附赠图片
image.png
