问题标签 [animate-on-scroll]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
html - 如何将父 div 的高度设置为仅一个（多个）子元素的高度
在我网站的主页上，我使用滚动动画库在向下滚动时显示页面的不同部分。我希望父 div 最初只有第一个子 div ( .intro) 的高度。向下滚动时，框的高度会扩大以适应内容的整个高度。
它现在使用 Vue.js 中的动态类绑定部分工作，滚动后将高度更改为 100%。但是当我将它设置为绝对值时，我只能得到正确的初始高度，这不是我想要的。
我尝试将初始高度设置为不同的百分比（从 1% 到 99%），但这无济于事。使用height: 70vh是我最接近解决方案的方法，但这仍然会导致不同屏幕尺寸的问题。
display: none在其他子 div ( .aboutand ) 上使用.work可以解决我的高度问题，但我需要所有隐藏的内容留在页面上以触发不同的方法和动画，所以我不能使用它。
我真的很喜欢一个响应速度更快的解决方案，它可以将父高度与第一个子 div 的高度相匹配。有没有办法只使用 CSS 来做到这一点？还是使用 Vue.js 或 Javascript？
javascript - 关于使用 Vanilla JS 的小屏幕上的滚动动画问题
我为我的网站创建了一个动画，以在使用 Vanilla JS 滚动时更改某个元素（例如其背景颜色）。为此，我使用了该属性并在到达特定位置window.onscroll时触发动画，我的代码是：window.scrollY
当我在我的大屏幕分辨率上编辑时它看起来很棒，但如果我在笔记本电脑上查看页面，动画就会变得混乱，因为屏幕的innerWidth和innerHeight不同。如果动画到达页面的某个部分，我想动态触发动画，而不必担心滚动位置。
有人对我如何解决这个问题有任何想法吗？
javascript - AOS 库不工作，除了刷新
我正在构建一个网站，其中一个 div 需要在滚动到视图中时从左向右滑入。我正在使用AOS库对其进行动画处理，但除非我将元素滚动到视图中，然后刷新选项卡，否则它不起作用。
这是我的 HTML 的头：
我的身体内容：
我的代码有问题吗？还是图书馆？如果是图书馆，有什么好的选择吗？
javascript - AOS（滚动动画）不能全屏工作
我有一个网站，我在其中添加了AOS动画。
并在脚本标签中：
每当我最小化它开始工作的浏览器窗口时，但如果我刷新我的网站它永远不会工作，我也使用了最新CDN的和js
javascript - 使用带有类而不是数据属性的 AOS.js
我想在我的网站上使用 AOS.js，但我无法将必要的数据属性添加到页面的 DIV。
这是文档中的标记（https://michalsnik.github.io/aos/）：
我的标记如下所示：
有没有办法只使用类来使用 AOS.js？
我在研究时发现了一个类似的问题：使用类添加 aos.js 时遇到问题 但是没有答案。
这是另一个问题的代码，但这不起作用：
有任何想法吗？
reactjs - Gatsby/React - 滚动上的淡出部分？
我一直在尝试使用gatsby-plugin-scroll-revealwhich 使用 Sal.js 来为我网站上的英雄部分设置动画。我正在努力使英雄中的文本在您向下滚动页面时淡入然后淡出。现在，我只能让它淡入。我怎样才能用 Sal.js 或其他方式实现它？
我还尝试了一种不同的方法，创建了一个使用 IntersectionObserver DOM API 的组件，但我无法让它真正发挥作用。
这是组件：
npm - 无法导入我下载的 npm 模块
我正在使用 Animate on Scroll (aos) 模块运行 SvelteKit 应用程序。这就像一个魅力，但由于我的项目的性质，我需要修改模块中的几行，所以我从 GitHub 中提取项目，修改它，重建它并通过本地依赖项导入它：
但是，每当我现在尝试导入模块时：import AOS from 'aos';，我都会收到以下错误消息：
请注意，当我拉取存储库并尝试在本地导入它而不更改它时，也会发生这种情况。为什么会发生这种情况，我该如何解决？
javascript - 滚动动画 (AOS) 库：当您在动画下方滚动然后向上滚动时，动画会消失并重新激活
我在网上找不到任何解决这个问题的方法。本质上，使用滚动动画库，一旦动画在视口中或视口上方，您的动画就会被动画化（aos animate 类激活），因此即使您在其下方滚动或在动画下方重新加载页面，它也已经出现。一旦我在它上方或下方滚动，我希望它消失，似乎没有一个简单的数据属性可以做到这一点。是否有任何香草 JS 代码来解决这个问题？