transitionCom.js
2.62 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
import React, { Component } from "react"
import "./transitionCom.css"
const countDefault = 3; //存入多少个
const leftSpanceDefault = 2; //间隔
const timeSlideDefault = 1; //滑动时间
export default class TransitionCom extends Component {
constructor(props) {
super(props);
this.state = {
...props,
}
}
static getDerivedStateFromProps(props) {
let { children, count = countDefault, leftSpance = leftSpanceDefault, timeSlide = timeSlideDefault } = props
if (children.length >= count + 1) {
var Width = ((100 - leftSpance * (count - 1)) / count).toFixed(2);
var left = (parseFloat(Width) + leftSpance) * (children.length - count)
var objectTransition = document.getElementById("objectTransition")
objectTransition.style.transition = timeSlide + "s all 0s"
objectTransition.style.left = -left + "%";
}
return {
children: children
}
}
componentDidUpdate() {
let { children, count = countDefault, leftSpance = leftSpanceDefault, timeSlide = timeSlideDefault } = this.props
if (children.length < count + 1) {
var Width = ((100 - leftSpance * (count - 1)) / count).toFixed(2);
var objectTransition = document.getElementById("objectTransition")
var childrenNodes = objectTransition.childNodes;//他的子节点
var nowNodes = childrenNodes[childrenNodes.length - 1];//子节点的最后一个
nowNodes.style.left = "100%";
nowNodes.style.transition = timeSlide + "s all 0s"
setTimeout(() => {
nowNodes.style.left = (parseFloat(Width) + leftSpance) * (childrenNodes.length - 1) + "%";
}, timeSlide * 1000)
}
}
render() {
let { children } = this.state;
let { count = countDefault, leftSpance = leftSpanceDefault } = this.props;
return (<div className="objectTransitionOther">
<div id="objectTransition" className="objectTransition">
{
children.map((item, index) => {
var Width = ((100 - leftSpance * (count - 1)) / count).toFixed(2);
if (index >= 1 && index < 3) {
return <div style={{ width: Width + "%" }} key={index}>{item}</div>
} else {
return <div style={{ width: Width + "%", left: (parseFloat(Width) + leftSpance) * index + "%" }} key={index}>{item}</div>
}
})
}
</div>
</div>)
}
}