- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
是否有任何内置方法可以使动画在元素处于 View 中时开始(例如,当我们滚动到元素时)?
Framer Motion有安装动画部分,内容如下:
When a component mounts, it'll automatically animate to the values in animate if they're different from those defined in style or initial
所以我真的找不到一种直接的方法来让动画在进入 View 时开始。
但是,我现在看到的唯一选项是使用 Animation Controls这意味着我必须手动在滚动上实现监听器并触发 control.start()
,任何更简单的方法都非常感谢。
最佳答案
framer-motion
自版本 5.3 以来已内置对此用例的支持。
这是一个演示该模式的 CodeSandbox:https://codesandbox.io/s/framer-motion-animate-in-view-5-3-94j13
相关代码:
function FadeInWhenVisible({ children }) {
return (
<motion.div
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
transition={{ duration: 0.3 }}
variants={{
visible: { opacity: 1, scale: 1 },
hidden: { opacity: 0, scale: 0 }
}}
>
{children}
</motion.div>
);
}
用法:
<FadeInWhenVisible>
<Box />
</FadeInWhenVisible>
以前的版本:
您当前可以使用imperative animation controls来达到这个效果。相交观察器对于检测元素当前是否可见非常有用。
这是一个演示该模式的 CodeSandbox:https://codesandbox.io/s/framer-motion-animate-in-view-gqcc8 .
相关代码:
function FadeInWhenVisible({ children }) {
const controls = useAnimation();
const [ref, inView] = useInView();
useEffect(() => {
if (inView) {
controls.start("visible");
}
}, [controls, inView]);
return (
<motion.div
ref={ref}
animate={controls}
initial="hidden"
transition={{ duration: 0.3 }}
variants={{
visible: { opacity: 1, scale: 1 },
hidden: { opacity: 0, scale: 0 }
}}
>
{children}
</motion.div>
);
}
关于javascript - 当元素处于 View 中时(当您滚动到元素时)成帧器运动动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58958972/
我已经尝试了几次运行下面的代码,无论是在本地还是在 codeandbox 上。 h1 的重复动画不起作用,我的代码有什么问题还是运动重复属性的错误? import React from "react"
我将 next js 用于我的应用程序和 framer 运动用于我的动画。我可以设置一个介绍动画,但所有退出动画都不起作用.. 我已将代码封装在动画存在下,但它什么也没做。 我在这里错过了什么? 下面
我是一名优秀的程序员,十分优秀!