topcoder-app-r/src/untitled.scss

// .mytest-enter .subtrack-item {
//   background-color: black;

//   &.mytest-enter-active {
//     transition: background-color 2s ease;
//   }
// }

.mytest-appear {
  * {
    opacity: 0.01;
    background-color: white;
    -webkit-transition: all 3000ms ease-in;
    transition: all 3000ms ease-in;

  }

  &.mytest-appear-active {
    * {
      opacity: 1.0;
      background-color: tomato;

    }
  }
}

.mytest2-appear {
  * {
    opacity: 1.0;
    -webkit-transition: all 3000ms ease-in;
    transition: all 3000ms ease-in;

  }

  &.mytest2-appear-active {
    * {
      opacity: 0;
    }
  }
}



function renderTopMembers() {
  if (tag) {
    const preposition = getSearchTagPreposition(tag.domain)

    if (topMembers.length) {
      return (
        <ListContainer
          headerText={`Top Members ${preposition} `}
          headerHighlightedText={tag.name}
        >
          <ReactCSSTransitionGroup transitionAppear transitionAppearTimeout={100} transitionName={"mytest"}>
            <TopMemberList topMembers={topMembers} />
          </ReactCSSTransitionGroup>
        </ListContainer>
      )

    } else {
      return (
        <ListContainer
          headerText={'Loading...'}
        >
          <ReactCSSTransitionGroup transitionLeaveTimeout={100} transitionName={"mytest2"}>
            <ul>
              {[1,2,3,4,5,6,7,8,9,10].map((e, i) => {
                return <div className="my-loading-card" style={{ height: '100px', width: '960px', backgroundColor: 'white', border: '1px solid black'}} key={i} />
              })}
            </ul>
          </ReactCSSTransitionGroup>
        </ListContainer>
      )
    }
  }