Blame view

src/components/transitionCom/transitionCom.js 2.62 KB
40aa9a73   Zhang Zhuo   更新视频插件 -张卓
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>)
      }
  }