热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

React实现块依次从下到上进入的动画

app.jsimportReact,{useEffect,useState}from'react';importNavfrom'.components

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  大佬



推荐阅读
author-avatar
mobiledu2502938577
这个家伙很懒,什么也没留下!
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有