作者:mobiledu2502938577 | 来源:互联网 | 2023-09-17 23:18
app.js
import React, { useEffect, useState } from 'react';
import Nav from './components/Nav';
import Footer from './components/Footer';
import About from './components/About';
import Product from './components/Product';
import Service from './components/Service';
import Value from './components/Value';
import JoinUs from './components/JoinUs';
import ContactUs from './components/ContactUs';
import './index.scss';
import { IntlProvider, addLocaleData } from 'react-intl';
import zh_CN from '@/locales/zh-CN';
import en_US from '@/locales/en-US';
const getLang = () => {
const search = window.location.search;
const params = new URLSearchParams(search);
return params.get('lang') || 'en';
};
const App = () => {
const [scrollTop, setScrollTop] = useState(0);
const [locale, setLocale] = useState(getLang());
const messages = {
zh: zh_CN,
en: en_US
};
const handleScroll = () => {
const top =
document.documentElement.scrollTop || document.body.scrollTop;
setScrollTop(top);
};
useEffect(() => {
handleScroll();
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []);
return (
);
};
export default App;
在app.js中传递scrollTop给组件,用来计算动画触发时的高度
随便一个组件的代码:
import React, { useState, useEffect, useRef } from 'react';
import { Animate } from 'react-move';
import { FormattedMessage } from 'react-intl';
import { easeQuadInOut } from 'd3-ease';
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 = ({ scrollTop }) => {
const ref = useRef();
const [options, setOptions] = useState(false);
const showOption = () => {
setOptions(!options);
};
const handleScroll = top => {
const obj = ref.current;
const clientHeight = document.documentElement.clientHeight;
const diff = clientHeight - obj.offsetTop + top;
const doms = document.querySelectorAll('.section-joinus__select');
Array.from(doms).forEach((item, index) => {
if (diff > 0 && !item.style.animation) {
item.style.animation = `slideUpBox 1s ease-in ${0.2 *
index}s forwards`;
}
});
const domText = document.querySelector('.section-joinus__resc');
if (diff > 0 && !domText.style.animation) {
domText.style.animation = `slideUp 1s ease-in forwards`;
}
};
useEffect(() => {
handleScroll(scrollTop);
}, [scrollTop]);
const [items, setItems] = useState([
{
id: 0,
country: ,
work1: ,
work2: ,
btntxt:
},
{
id: 1,
country: ,
work1: ,
work2: ,
btntxt:
}
]);
return (
{items.map((item, index) => (
className="country"
OnClick={() => showOption()}
>
{item.country}
className="option"
0'
: '200px'
: options
? '200px'
: '0'
}}
>
- {item.work1}
- {item.work2}
))}
);
};
export default JoinUs;
ps:
forwards:当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。
------from 大佬