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);
  }