Home>

https://codepen.io/Saomocari/pen/rVjvvg

What should I do to animate the above animation with React?

There are several types of check boxes as specifications, and DOM is generated based on the JSON value.

** state and method
**

constructor (props) {
    super (props);
    this.state = {
      location: 'front-end-engineer'
    };
  }
  getDataLocation (e) {
    this.setState ({
      location: e.currentTarget.dataset.location,
    });
  }

■ Checkbox portion

<ul className = "list">
                <li className = "list__item">
                  <span className = "radio">
                    <label>
                      <input
                        type = "radio"
                        name = "radio"
                        defaultChecked
                        data-location = "front-end-engineer"
                        onClick = {e =>this.getDataLocation (e)}
                      />
                      <span className = "radio__label">
                        Front-end engineer
                      </span>
                    </label>
                  </span>
                </Li>
                <li className = "list__item">
                  <span className = "radio">
                    <label>
                      <input
                        type = "radio"
                        name = "radio"
                        data-location = "designer"
                        onClick = {e =>this.getDataLocation (e)}
                      />
                      <span className = "radio__label">Designer</span>
                    </label>
                  </span>
                </Li>
                <li className = "list__item">
                  <span className = "radio"><label>
                      <input
                        type = "radio"
                        name = "radio"
                        data-location = "writer"
                        onClick = {e =>this.getDataLocation (e)}
                      />
                      <span className = "radio__label">Editor/Writer</span>
                    </label>
                  </span>
                </Li>
                <li className = "list__item">
                  <span className = "radio">
                    <label>
                      <input
                        type = "radio"
                        name = "radio"
                        data-location = "photographer"
                        onClick = {e =>this.getDataLocation (e)}
                      />
                      <span className = "radio__label">Photographer</span>
                    </label>
                  </span>
                </Li>
                <li className = "list__item">
                  <span className = "radio">
                    <label>
                      <input
                        type = "radio"
                        name = "radio"
                        data-location = "human-resources"
                        onClick = {e =>this.getDataLocation (e)}
                      />
                      <span className = "radio__label">Human Resources</span>
                    </label>
                  </span>
                </Li>
                <li className = "list__item">
                  <span className = "radio">
                    <label>
                      <input
                        type = "radio"
                        name = "radio"
                        data-location = "marketing"
                        onClick = {e =>this.getDataLocation (e)}
                      />
                      <span className = "radio__label">Marketing</span>
                    </label>
                  </span></Li>
              </ul>

■ Main content part

<ul className = "user-list">
              {Object.keys (userListJson [location]). Map ((item, index) =>{
                return (
                  <li
                    className = "user-list__item"
                    key = {index}
                    style = {{"transitionDelay": (index * 0.5) + "s"}}
                  >
                    
                      <p className = "icon">
                        
                      </p>
                      
                        <p className = "name">
                          {userListJson [location] [item] ['name']}
                        </p>
                        
                          <p className = "age">
                            <span>{userListJson [location] [item] ['age']}</span>
                          </p>
                          <span className = "diagonal-line">/</span>
                          <p className = "job">
                            {userListJson [location] [item] ['job']}
                          </p>
                        
                      
                    
                    
                      
                        <p className = "week">
                          <span>{userListJson [location] [item] ['week']}</span>
                        </p>
                        <p className = "wage">
                          <span>{userListJson [location] [item] ['wage']}</span>
                        </p>
                      
                    
                  </Li>
                );
              })}
            </ul>
  • Answer # 1

    I don't care if it's React or not.
    In this case, the outermost tag of the map is the

    tag, so I think that you can add a class name to it.

    About rendering when using the React map,
    Even if you are using a map, the final display is just the html that displays them.
    Therefore, if you do not make a mistake in assigning the class name, it will work as CSS regardless of whether you are using map.

  • Answer # 2

    Turn for for a while and use setTimeout.

    const listItem = document.querySelectorAll ('. user-list__item');
        this.setState ({
          location: e.currentTarget.dataset.location,
        });
        for (let i = 0;i

Related articles

Trends