问题标签 [web-animations]

我正在开发一个使用 React.js 构建的网络应用程序。我想在 div 进入视口时触发动画。目前，我可以运行动画，但动画不会等待 div 进入视口。

假设用户在安装组件之前访问该站点并切换到另一个选项卡。因此，在用户切换回此选项卡之前，假设组件已安装，但动画应该仅在用户切换回此选项卡时开始。

我已经使用react -transition-group包中的CSSTransitionGroup实现了动画。我试图弄清楚如何在 div 进入视口时触发动画。

RequestFormComponent.js

CSS

我知道这可以通过使用 JQuery 来实现，但是有没有办法只使用 React.js 来实现它？即使使用 JQuery 和 React 可以解决此问题，也请提出您的建议。

谢谢您的帮助！

我正在学习如何在 CSS 中制作动画。我知道我可以将iteration-count属性设置为无限，它会无限期地运行，但我希望循环是平滑的。在关键帧中回到 0% 后，动画不平滑并立即更改为该属性。如果有意义的话，我希望从 100% 到 0% 的过渡能够顺利进行。

这是我的 HTML

这是我的 CSS

谢谢

所以我正在尝试使用 react-transition-group 来动画应用程序不同部分之间的过渡。

我有我想要在 CSSTransition 组件中通过以下方式制作动画的组件：

另外，我的 CSS 中有以下代码：

出于某种原因，我还不能理解这是行不通的。有人对此有答案吗？

完整代码可在此处获得：https ://github.com/coccagerman/bond

提前致谢！

我们如何获取当前时间的 Animation KeyframeEffect 的属性值？

例如，假设我们有以下动画，天真地尝试获取属性的当前值，而不向 传递任何element内容KeyframeEffect，只希望对内存中的数字进行动画处理：

的输出不正确，因为我的数学与选择的current value of someProp不相符。easing"ease"

假设我们在 a 上ScrollTimeline，或者currentTime时间线的 以我们不知道的任意方式修改，等等。尝试使用基于当前时间的自定义数学和数组处理自己计算值会变得复杂。

有没有办法简单地访问属性的当前值？

我们想要这样做的原因是看看是否可以使用 Web 动画来为 WebGL 场景、画布绘图或任何不为 DOM 元素 CSS 属性设置动画的东西制作动画。

在以下示例中，一个动画将完成，而另一个将继续播放（因为 playState 不等于已完成）：

为什么一部动画永远不会“完成”？

我正在尝试制作一个控制 SVG 动画的切换按钮。它需要在正常和快速播放速度之间切换。理想情况下，最终目标是还设置一个计时器，以便它也可以缓慢启动/停止 - 但我似乎无法将 PlaybackRate 应用于我存储在 var 中的元素数组。我不是 JS 专家，但我认为我的数组有问题，或者只是没有定义我尝试应用的实际动画。

这是我到目前为止所拥有的： https ://codepen.io/madmaxhayden/pen/qBmrGNM

播放按钮将随机延迟应用于每个元素的动画。但减速功能似乎没有任何效果。

我正在为我的网站使用 GSAP 和 fullpage.js，所以如果您对此有任何经验，请帮助我。所以问题是当我用鼠标滚轮滚动时它按预期工作，但是当我用触控板滚动时我有一些“延迟”或不知道如何解释它，你可以在CodePen上看到。

fp-nav 也不起作用

提前致谢！

https://codepen.io/mrdisa97/pen/XWabqbO

JavaScript 代码：

我希望在文本元素上创建特定的动画效果，但对 GSAP 来说是新手，我可以使用一些帮助。

我有一系列引号需要在我的 vue 应用程序上显示和制作动画。引号列表需要进行动画处理，以便每个引号从屏幕顶部滚动到循环底部。随着新引号的添加，引号数组将变大。

到目前为止，我已经能够获得整个报价列表以在屏幕上显示动画，但这并不是我想要的。我制作了一个代码笔，显示了我当前所在位置的代码：https ://1fj5k.csb.app/

将列表作为一个整体进行动画处理的问题在于，每个引用都没有正确地循环回页面顶部。正如您在下图中看到的，当列表到达屏幕的大约一半时，列表上方还有一堆空白区域。我想让已经离开屏幕底部的引号在屏幕顶部重新出现，所以它是一个连续的引号循环，它们之间没有空格。

我想我需要为每个引用而不是引用列表制作动画，但我不确定从哪里开始。

这就是引号应该如何循环回到顶部：

我正在努力实现的示例

https://dribbble.com/shots/15453707-Si-Design-PC-Homepage-Motion

我在 dribbble 上看到了这个例子，如果你将鼠标悬停在图像上，就会出现文本。文本在白色背景上为黑色，在图像上为白色。我尝试过使用混合混合，但这并没有给出相同的结果。关于如何实现这一点的任何建议。

当用户将鼠标悬停在 img 上时，如何为 sibaligns 元素设置动画？

我知道我可以将它与 WhileHover 父 div 一起使用，但这太多了，我不想在悬停我的描述 div 时设置动画