React-基于react-transition-group 实现从下到上进入的入场动画

  本功能是实现两个下拉选择框依次在页面滚动到指定位置时由下往上入场。

利用了CSSTransition实现。

react-transition-group官网：http://reactcommunity.org/react-transition-group/css-transition

页面代码：

import React, { useState, useEffect } from 'react';
import { CSSTransition } from 'react-transition-group';
import Location from '@/assets/svg/location.svg';
import ArrowUp from '@/assets/svg/arrow-down.svg';
import Globe from '@/assets/images/globe.png';
import './index.scss';

const JoinUs = () => {
    const [options, setOptions] = useState(false);
    const showOption = ()=>{
        setOptions(!options);
    }
    const [inProp, setInProp] = useState(false);
    const [inProp2, setInProp2] = useState(false);
    const handleScroll = () => {
        const obj = document.querySelector('.section-joinus');
        const clientHeight = document.documentElement.clientHeight; //浏览器可见区域高度。
        const diff = clientHeight - obj.getBoundingClientRect().top;
        if(diff > 150){
            setInProp(true);
        }else{
            setInProp(false);
        }
        if(diff > 300){
            setTimeout(()=>{
                setInProp2(true);
            },1500)
        }else{
            setInProp2(false);
        }
    };
    const [items, setItems] = useState([
        { 
            id:0,
            country: 'Singapore',
            work1: 'Product Manager / Product Owner',
            work2: 'Legal Manager',
            btntxt: 'View All Jobs' 
        },
        {  
            id:1,
            country: 'China / Xiamen',
            work1: 'Coporate Planning Manager',
            work2: 'UI / UX Designer',
            btntxt: 'View All Jobs'
        }
      ]);
    useEffect(() => {
        window.addEventListener('scroll', handleScroll);
        return () => {
            window.removeEventListener('scroll', handleScroll);
        };
    }, []);
    return (
        <div className="section section-joinus">
            
                    <div className='padding37'>
                    <div className="page-wrapper-inner">
                        <h1>Join Us</h1>
                        <div className='section-joinus__resc'>
                        An opportunity to work with the best talents within the tech industry, with future hubs throughout Asia, there will be countless opportunities to travel, develop your
            skills and expand your knowledge while enjoying a new culture!
                        </div>
                            {items.map((item, index) => (
                                <CSSTransition
                                key={index}
                                in={index === 0 ?inProp : inProp2}
                                timeout={500} 
                                classNames='fade'
                                >
                                    <div className='section-joinus__select' key={item.country}>
                                        <div className='country' onClick={() => showOption()}><i className='i-pos'><Location/></i><span>{item.country}</span><i className='i-up'><ArrowUp/></i></div>
                                        <div className='option' style={{height: index===0 ? options ? '0': '200px': options? '200px': '0'}}>
                                            <ul>
                                                <li>{item.work1}</li>
                                                <li>{item.work2}</li>
                                            </ul>
                                            <button>{item.btntxt}</button>
                                        </div>
                                    </div>
                                </CSSTransition>
                            ))}
                    </div>
                </div>
                
            <p className='section-joinus__china'>CHINA / XIAMEN</p>
            <p className='section-joinus__singa'>SINGAPORE</p>
            <i className='section-joinus__circleChina'></i>
            <i className='section-joinus__circleSinga'></i>
            <div className='section-joinus__bg'><img src={Globe} /></div>
        </div>
    );
};
export default JoinUs;

　　scss代码：

//enter是入场前的刹那（点击按钮），appear指页面第一次加载前的一刹那（自动）
//enter-active指入场后到入场结束的过程，appear-active则是页面第一次加载自动执行
.fade-enter {
    opacity: 0;
    transform: translate(0,200px);
}
.fade-enter-active {
    opacity: 1;
    transition: all .6s;
    transform: translate(0,0);
}
.fade-exit {
    opacity: 1;
    transition: all .6s;
    transform: translate(0,0);
  }
  .fade-exit-active {
    opacity: 0;
    transform: translate(0,200px);
  }