import React,{Component} from 'react';import {Motion,spring,presets} from 'react-motion';
import './motion.css';
class ReactMotion extends Component{
constructor(props){
super(props);
this.state={
left:0
}
}
clickHandler=()=>{
let targetX=0;
if(this.state.left===0){
targetX=200;
}else{
targetX=0;
}
this.setState({
left:targetX
})
}
componentDidMount=()=>{
this.clickHandler();
}
render(){
return(
<div className="container">
<Motion style={{x:spring(this.state.left,presets.wobbly)}}>
{
//关键: interpolatingStyle===style
interpolatingStyle=>{
return(
<div
style={{transform:`translateX(${interpolatingStyle.x}px)`}}
className='box'
></div>
)
}
}
</Motion>
<button onClick={this.clickHandler}>run</button>
</div>
)
}
}
export default ReactMotion;
三个组件共用CSS:
.box{width: 100px;
height: 100px;
background-color: #000;
}
.box2{
width: 100px;
height: 100px;
background-color: #000;
float:left;
}
.box3{
width: 200px;
height: 200px;
background-color: red;
}
第二个案例:StargeredMotionCom
import React, { Component } from 'react';import { StaggeredMotion, spring, presets } from 'react-motion';
import '../ReactMotion/motion.css';
// 用StaggeredMotion 实现一个联动动画
class StargeredMotionCom extends Component {
constructor(props) {
super(props);
this.state = {
length: 10
}
}
addLength = () => {
let newLength;
if (this.state.length) {
newLength = 0;
} else {
newLength = 10;
}
this.setState({
length: newLength
})
}
render() {
let boxes = [];
for (let i = 0, len = this.state.length; i < len; i++) {
boxes.push({ scale: 0 })
}
return (
<React.Fragment>
<div>
{this.state.length > 0 ? (
<StaggeredMotion defaultStyles={boxes} styles={prevStyles => {
console.log(prevStyles,'prevStyles')
return prevStyles.map((item, i) => i === 0?{scale: spring(1, { ...presets.noWobble })}:prevStyles[i - 1])}}
>
{interpolatingStyles =>{
console.log(interpolatingStyles,'interpolatingStyles')
return<div>
{interpolatingStyles.map((item, i) => {
return (
<div className="box2" key={i} style={{transform: `scale(${item.scale}, ${item.scale})`}}></div>)})
}
</div>
}
}
</StaggeredMotion>
) : null}
</div>
<button onClick={this.addLength}>run</button>
</React.Fragment>
)
}
}
export default StargeredMotionCom;
第三个案例:TransitionMotion
import React, { Component } from 'react';import { TransitionMotion, spring } from 'react-motion';
import '../ReactMotion/motion.css';
class TransitionMo extends Component {
constructor(props) {
super(props);
this.state = {
show: true
}
}
componentDidMount = () => {
this.setState({
show: false
})
}
clickHandler = () => {
this.setState({
show: !this.state.show
})
}
willEnter = styleThatEnter => {
return { scale: 0 }
}
willLeave = styleThatLeft => {
return { scale: spring(0) }
}
render() {
return (
<div>
<button onClick={this.clickHandler}>run</button>
{/* style===inStyles */}
<TransitionMotion styles={this.state.show ? [{ key: 'test', style: { scale: spring(1) } }] : []}
willEnter={this.willEnter}
willLeave={this.willLeave}>
{inStyles => (
inStyles[0] ? (
<div className="box3"
key={inStyles[0].key}
style={{
transform: `scale(${inStyles[0].style.scale},${inStyles[0].style.scale})`
}}></div>
) : null
)}
</TransitionMotion>
</div>
);
}
}
export default TransitionMo;
还没有评论,来说两句吧...