reactjs - 成帧器运动 | 在最后一个动画加载后视点“useAnimation”触发
问题描述
阅读 Framer Motion 的文档后,我找不到,或者我错过了当元素进入视点时触发动画的可能方法。我一直在做推荐的方法,但只有一个元素。当我添加更多元素时,动画只会在最后一个元素进入视点后触发,不应该那样。计划是单独加载每个元素。
所以,我一直在研究使用 React Intersection Observer 的可能方法。不幸的是,我无法设置可以完成这项工作的有效脚本。
所以我的目标是:使用 forEach 方法单独加载每个元素。
您可以检查链接中发生的情况。只有在最后一个动画加载后,您才能看到标题加载下的动画。
import React, { useEffect } from "react";
import Button from "../components/Button";
import { motion, useAnimation } from "framer-motion";
import { useInView } from "react-intersection-observer";
import Layout from "../components/Layout";
const easing = [0.6, -0.05, 0.01, 0.99];
const fadeInUp = {
initial: {
y: 60,
opacity: 0
},
animate: {
y: 0,
opacity: 1,
transition: {
duration: 0.6,
ease: easing
}
}
};
const fadeInUp2 = {
initial: {
y: 60,
opacity: 0
},
animate: {
y: 0,
opacity: 1,
transition: {
duration: 0.6,
delay: 0.3,
ease: easing
}
}
};
const fadeInUp3 = {
initial: {
y: 60,
opacity: 0
},
animate: {
y: 0,
opacity: 1,
transition: {
duration: 0.6,
delay: 0.6,
ease: easing
}
}
};
const fadeToRight = {
initial: {
x: -100,
opacity: 0
},
animate: {
x: 0,
opacity: 1,
transition: {
duration: 0.6,
delay: 0.9,
ease: easing
}
}
};
const fadeToLeft = {
initial: {
x: 100,
opacity: 0
},
animate: {
x: 0,
opacity: 1,
transition: {
duration: 0.6,
delay: 0.9,
ease: easing
}
}
};
// const animTitle = {
// initial: {
// y: 100,
// opacity: 0
// },
// animate: {
// y: 0,
// opacity: 1,
// transition: {
// duration: 0.6,
// delay: 1.2,
// ease: easing
// }
// }
// };
const index = () => {
const controls = useAnimation();
const [ref, inView] = useInView();
useEffect(() => {
if (inView) {
controls.start("visible");
}
}, [controls, inView]);
return (
<motion.div exit={{ opacity: 0 }} initial="initial" animate="animate">
<Layout title="Digitalna agencija za sve digitalno ― Digitalko">
<section className="home">
<header>
<div className="title">
<motion.div variants={fadeInUp}>
<h6>
Trenutno traju sniženja od <span>20%</span> popusta
</h6>
</motion.div>
<motion.div variants={fadeInUp2}>
<h1>Digitalna agencija za sve digitalno, doslovno</h1>
</motion.div>
<motion.div variants={fadeInUp3}>
<h2>
We design and build beautiful brands, apps, websites and
videos for startups and tech companies.
</h2>
</motion.div>
<div className="row">
<motion.div variants={fadeToRight}>
<Button url="/test" name="Započni projekt" />
</motion.div>
<motion.div variants={fadeToLeft}>
<Button className="secondary" url="/" name="Naši radovi" />
</motion.div>
</div>
</div>
</header>
<div className="container--services">
<motion.div
ref={ref}
animate={controls}
initial="hidden"
transition={{ duration: 0.6 }}
variants={{
visible: { opacity: 1, y: 0 },
hidden: { opacity: 0, y: 200 }
}}
>
<h1>Našim klijentima pružamo ono što im je najpotrebnije</h1>
</motion.div>
<div className="columnController">
<div className="column">
<motion.div
ref={ref}
animate={controls}
initial="hidden"
transition={{ duration: 0.6, delay: 0.3 }}
variants={{
visible: { opacity: 1, y: 0 },
hidden: { opacity: 0, y: 200 }
}}
>
<p>
We’re a team of designers and developers who spend our time
solving problems and telling the stories of great companies.
We help you think more deeply about what you’re offering
people through your brand, products and services.
</p>
</motion.div>
<br />
<motion.div
ref={ref}
animate={controls}
initial="hidden"
transition={{ duration: 0.6, delay: 0.6 }}
variants={{
visible: { opacity: 1, y: 0 },
hidden: { opacity: 0, y: 200 }
}}
>
<p>
Our mission is to work with companies who want to change the
game. We want to help amazing tech startups get from zero to
one and create beautiful things that make life better.
</p>
</motion.div>
</div>
<div className="column">
<motion.div
ref={ref}
animate={controls}
initial="hidden"
transition={{ duration: 0.6, delay: 0.9 }}
variants={{
visible: { opacity: 1, y: 0 },
hidden: { opacity: 0, y: 200 }
}}
>
<p>
Our mission is to work with companies who want to change the
game. We want to help amazing tech startups get from zero to
one and create beautiful things that make life better.
</p>
</motion.div>
</div>
</div>
<motion.div
ref={ref}
animate={controls}
initial="hidden"
transition={{ duration: 0.6, delay: 0.9 }}
variants={{
visible: { opacity: 1, y: 0 },
hidden: { opacity: 0, y: 200 }
}}
>
<Button url="/test" name="Pogledaj detaljnije" />
</motion.div>
</div>
<div className="container--services">
<motion.div
ref={ref}
animate={controls}
initial="hidden"
transition={{ duration: 0.6 }}
variants={{
visible: { opacity: 1, y: 0 },
hidden: { opacity: 0, y: 200 }
}}
>
<h1>Našim klijentima pružamo ono što im je najpotrebnije</h1>
</motion.div>
</div>
</section>
</Layout>
</motion.div>
);
};
export default index;
解决方案
推荐阅读
- c++ - 使用 C++ 的矩阵乘法
- aws-cdk - CfnNetworkInterface 中的网络接口错误
- c# - SmtpClient 不适用于构造函数中给出的值
- python - 无法使用正则表达式删除不需要的项目
- exception - ESP8266 反复抛出 Exception(0)
- raspberry-pi - 如何向连接到树莓派的 GPS 模块发送 AT 命令
- docker - Docker 中的 Dotnet 在 linux 上发布错误(Azure DevOps 构建)
- java - 如何在本地使用 spring-cloud-starter-aws 运行应用程序?
- linux - 目标与目标模式不匹配
- selenium - UI 自动化 - 我的 UI 上的元素有 ember ids ,随着新 UI 元素的添加而频繁更改。如何使用 id 进行自动化?