在滚动的元素中添加和删除多个类，反转动画
是通过JavaScript和CSS来实现的。具体步骤如下：
- 首先，需要获取到需要滚动的元素。可以使用JavaScript的
querySelector或getElementById等方法获取到对应的DOM元素。 - 接下来，需要定义需要添加和删除的类名。可以根据需求自定义类名，例如
class1、class2等。 - 使用JavaScript的
classList属性来添加和删除类名。可以使用add方法添加类名，使用remove方法删除类名。例如，element.classList.add('class1')可以将class1类名添加到元素中，element.classList.remove('class1')可以将class1类名从元素中删除。 - 如果需要在滚动时添加和删除类名，可以使用JavaScript的
scroll事件监听滚动事件。例如，element.addEventListener('scroll', function() { ... })可以监听元素的滚动事件。 - 在滚动事件的回调函数中，根据滚动的位置来判断是否需要添加或删除类名。可以使用
scrollTop属性获取元素的滚动位置，然后根据需求判断是否添加或删除类名。 - 反转动画可以使用CSS的
transform属性来实现。可以定义一个反转的动画效果，然后根据需要添加或删除类名来触发动画。例如，可以定义一个名为reverse-animation的CSS类，然后使用element.classList.add('reverse-animation')来触发反转动画。 - 最后，根据具体需求来调整滚动的触发条件、添加和删除的类名以及反转动画的效果。
总结起来，通过JavaScript监听滚动事件，在滚动的元素中添加和删除多个类名，可以实现滚动时的动态效果和反转动画。具体的实现方式可以根据具体需求和场景进行调整。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
- 腾讯云云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb
- 腾讯云云存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iot
- 腾讯云移动开发（移动推送、移动分析等）：https://cloud.tencent.com/product/mobile
- 腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云视频处理（VOD）：https://cloud.tencent.com/product/vod
相关·内容
2回答
通过滚动触发CSS关键帧动画
、、、、
假设我有一个带有动画的元素：
#element {
animation: Fade 3s linear 1s forwards;
}
@keyframes Fade {
/* do stuff */
}
如何才能仅在用户向下滚动时触发此动画？Vanilla JS，jQuery，ScrollMagic，GSAP/TweenMax，随便你怎么做。
添加动画属性本身会触发该效果吗？因此，用户滚动到某个点/元素，然后我应用如下内容：$('#element').css('animation', 'Fade 3s linear 1s forwards
浏览 2提问于2016-01-23得票数 4
回答已采纳
我使用jQuery将类切换为repeat (它每隔5秒打开和关闭一秒动画)，但当另一个元素通过jQuery向其添加类时，我需要停止repeat。 我尝试了jQuery的if()，并进一步研究了事件委托，但不确定这是否是正确的路径，因为这不是一个单击事件。当页面滚动到该部分时，单独的"trigger“元素将获得一个”活动“类-这是我需要动画停止并且不再播放的时候。 这是每5秒重复一次的一秒动画(我在WordPress中使用此代码，所以使用"jQuery“而不是"$") setInterval(function(){
jQuery(".featB
浏览 58提问于2019-10-06得票数 0
回答已采纳
我已经用viewportChecker.js和animate.css制作了滚动动画。问题是，移动设备上的动画播放速度真的很慢。动画元素有一个类"scroll“。
所以，实际上有两个问题。一个是如何提高移动设备上的动画质量？或者，如何从某个视口上的每个元素中删除scroll类？
我尝试了一些我在互联网上找到的东西。我尝试过$(window).resize();和人们提到的很多其他东西。但是，我不能应用它们中的任何一个，当涉及到jquery时，我仍然是一个业余爱好者。
任何帮助都将不胜感激！
浏览 6提问于2016-03-18得票数 1
我使用动画和scrolltop创建了一个带有JavaScript调用的链接。它在任何地方都运行得很好，但在Firefox中，它可以导航到一个完整的页面。有什么想法吗？
<a href="javascript:$('html, body').animate({
scrollTop: $('#PAGETAG').offset().top + -500 }, 200);
$('#alertify-ok').trigger('click');"> [my text] </a>
在C
浏览 3提问于2019-04-16得票数 0
3回答
我正在使用animate.css ，我已经在我的网页中的一些元素中添加了一些动画。但是有一个问题。动画是立即完成的，并且在向下滚动到该部分之前已经结束。有没有办法在加载特定元素后添加动画类？
这样，只有当用户滚动到该元素时，动画才可见。
浏览 23提问于2017-01-19得票数 0
当项目的可见性被ng-hide/ng-show切换时，我如何在Angular中的元素上设置动画？
需要添加哪些CSS类才能正确地使元素具有动画效果？
浏览 2提问于2016-10-30得票数 0
我正在尝试创建一个动画粘滞导航，当用户滚动过某个点时，它会移动到文档的顶部。它几乎可以正常工作了(并且在第一次加载页面时运行得很好)，但是当用户滚动到顶部，然后第二次向下滚动时，导航会跳转而不显示动画。有没有人看到我做错了什么？
这是到目前为止我的jQuery：
var x = true;
$(window).scroll(function(){
if( $(document).scrollTop() > 150 ){
x = false;
$(".header").addClass("pinned");
}
浏览 0提问于2013-07-04得票数 3
回答已采纳
1回答
看看这个页面，
动画加载在页面上，我想要动画，当用户滚动到页面的这一部分时，加载如何实现。这是我的密码
@keyframes fill{
from{
width: 0%;
}
}
.progress{
animation: 3s fill ease-out 0.5s;
}
浏览 3提问于2021-02-18得票数 0
回答已采纳
1回答
我有一个动画链接到滚动位置。每当用户向上或向下滚动时，都会为该位置触发动画，以在视图窗口中移动元素。如果用户滚动得更远，这些动画需要排队，以便元素沿着路径平稳地移动。
var target = getAnimation();
var props = {
left: [target.x, target.easing],
top: target.y
};
$("#ball").animate(props, 400, "easeInOutQuad");
这样做的问题是，当多个动画排队时，球会变慢并以不好的方式加速。我想做的是这样的事情：
var ta
浏览 1提问于2015-03-13得票数 1
回答已采纳
当页面包含折叠下的CSS3动画，或者当用户向下滚动时隐藏的动画，您应该使用Javascript应用一个类来停止动画，还是浏览器不动画不可见的元素？
浏览 2提问于2015-02-07得票数 0
1回答
在jquery中删除动画后的id
、、、、
我想在动画完成后从图像中删除id。我的代码中有这样的代码：
if(index == 1 && direction =='down'){
$('#slidetext1 #rock').animate({right:"0"});
$('#slidetext1 #deer').animate({left: "0"}).addClass('open').removeAttr('id');
}
它不起作用，因为它甚至在开始动画之前就删除了id，但我想要做的是从图
浏览 1提问于2015-07-19得票数 3
2回答
转换粘贴导航栏- CSS
、、、
我有一个固定的导航栏使用affix()的推特引导3。
导航栏一切都很好。我想在导航栏的外观中添加一个transition。
当用户滚动页面时，导航栏将立即显示。我想给它做动画。
在-webkit-transition: all 1s ease-in中尝试，但结果是导航条的宽度。
这是。
当用户向下滚动时，请帮助我动画它。
浏览 3提问于2013-11-25得票数 7
回答已采纳
1回答
我一直在尝试将animate.css和waypoints结合起来，但我无法让动画工作。Animate.css创建动画，但它们都发生在页面加载上。当元素进入屏幕时，我希望动画发生，所以这就是我使用waypoint的原因。
我已经加载了动画和路径点文件到我的网站，我是链接到他们。当我加载我的页面时，我看到我的文本消失了(透明度被设置为0)，但是动画不会在我滚动的时候出现。救命啊！
在我的头上：
<link rel="stylesheet" href="../../Webartifacts/animate.css-master/animate.min.css"&
浏览 7提问于2017-03-30得票数 0
我正在制作一个网站演示使用引导框架和AOS -动画在滚动库。
在桌面上，我不得不更改一些动画，因为它们增加了页面的宽度，并进行了水平滚动。对于手机，我有同样的问题，但现在我不知道问题是由动画或其他什么引起的，我看到肚脐更大。
下面是链接：
我试图修复更广泛的元素，如导航栏，但问题仍然存在。我在其他问题上也看到过关于没有容器的行的类似情况，但事实并非如此。
我想有正确的宽度移动，没有水平滚动。
浏览 0提问于2019-06-12得票数 1
1回答
我创建了一个动画，它在div中向下滚动一段文本，然后我想，如果动画方向(向上或向下)根据滚动方向动态变化(如果你向下滚动，文本也会向下滚动，如果你向上滚动，该文本就会改变方向并向上滚动)，那会很有趣。问题是，我不知道如何用jQuery来更改关键框架CSS。有什么解决办法吗？
@keyframes spam {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(0, 100%);
}
}
和jQuery获得方向：
$(window).bind('mousewheel',
浏览 1提问于2019-02-12得票数 1
2回答
我们在侧边栏ul/il列表上使用twitter引导滚动间谍，这非常有用。不过，我们也使用平滑滚动时，点击链接在侧边栏。这将导致滚动间谍突出显示出现在视图中的每个元素，就像在正常情况下一样。
但是当滚动是由点击侧导航中的链接触发时，用户很可能不会期望菜单在滚动发生时产生动画。在运行动画卷轴时是否有任何方法暂时禁用滚动间谍，然后在滚动完成后重新启用它？
浏览 11提问于2013-09-19得票数 8
回答已采纳
我正在开发一个具有边面板和主时间线视图的应用程序。用户可以从侧面板中选择项目并将其拖到时间线视图中。
若要拖动该项，用户按下并按住鼠标左键，并将项目拖到时间线视图中。用户现在应该能够使用箭头键来上下滚动时间线，但是当按下这些按钮时，侧面板将被滚动。在鼠标向下操作时，我尝试将焦点设置到我的时间线元素上，但这不起作用。
onMouseDown = () => {
...
document.getElementById('timeLine').focus() // does not change the focus to the timeline
}
是否有可能在按住鼠
浏览 2提问于2020-03-18得票数 0
回答已采纳
3回答
我有一些元素，当滚动大于890px时是可见的。但我的问题是，元素必须在890px和920px之间可见，如果用户滚动超过920或小于890px，我需要隐藏该元素。
我正在使用动画css添加动画元素时出现。
这就是我目前在JS中所拥有的
var $document = $(document),
$elementField = $('.center-field');
$document.scroll(function () {
if ($document.scrollTop() >= 890) {
$elementField.stop().ad
浏览 2提问于2016-07-28得票数 0
背景，
有些元素需要应用CSS动画。然而，这些CSS需要动态生成，因为计算需要从JavaScript代码中完成。
问题澄清了如何动态添加CSS。现在的问题是，如何删除或替换在接受的答案之后生成的CSS？
首先要说明的是，这与从元素中删除类无关。我需要从页面中删除它，这样动画就会从类元素中停止。稍后，我可以修改CSS和重新注册类，以便相关元素以不同的方式进行动画。
浏览 3提问于2017-02-10得票数 0
1回答
这是我的页面：
问题是，当页面第一次加载时...然后当我向下滚动时，动画在大多数元素中都不起作用，比如视频下面的按钮……但是当我向上滚动时，动画开始工作，当我再次向下滚动时..它起作用了。
为什么不是第一次在页面加载后向下滚动？
浏览 0提问于2015-06-22得票数 0
1回答
每次在视口中设置图元动画
、、、
我在我的WordPress站点上的联系人表单上制作了动画。当我滚动页面到联系人表单时，会触发动画(弹跳)...但现在我需要一些修改:我需要动画来重复每次滚动到联系人表单的时候。有人能帮上忙吗
浏览 5提问于2015-03-25得票数 2
我想让我的左/右箭头转到下一个/上一个.embedded_post目录。问题是它只能工作一次，而且我只能在第一个和第二个div之间滚动。我认为它是-100的偏移量，但删除偏移量并没有起到作用。我在想，在我动画到下一个div之后，jQuery选择器没有移动任何地方，所以我被卡住了。
jQuery(document).keydown(function(e){
switch(e.which) {
case 37: // left
jQuery('html, body').animate({scrollTop:jQuery('.e
浏览 0提问于2012-12-04得票数 0
回答已采纳
3回答
在这个中，当您稍微滚动页面时，标题就会被动画化。您能否建议您可以使用哪些技术、工具和最佳实践(广义地)来实现这一目标和类似的效果？
浏览 0提问于2016-03-15得票数 0
回答已采纳
我有一个通常的animation.css文件和几个div在相同的地方，但有不同的动画附加到他们。他们应该同时动画(当滚动在页面上)，但不同的，即。
这是我在一个动画中使用的代码：
function isElementInViewport(elem) {
var $elem = $(elem);
// Get the scroll position of the page.
var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body&#
浏览 1提问于2015-01-19得票数 0
回答已采纳
我正在使用animate.css，这是好和简单，因为我是一个初学者。我可以让动画工作，并可以延迟动画与animation-duration: 3s和animation-delay: 0s;，但我无法找到如何触发它时，它进入我的视口，因为我滚动到它。下面是我到目前为止尝试过的代码：
HTML
<div class="about-container">
<p>Content here...</p>
</div>
CSS
.about-container{
background-color: #a3c
浏览 0提问于2016-08-24得票数 0
回答已采纳
3回答
如何禁用:在移动上滚动时悬停？
、、、、
我正在做一个移动版本(准确地说，是响应性的)，一个已经存在的桌面站点，它已经有了大量的hover效果。这种情况经常发生，而不是当我通过触摸屏幕在移动上滚动它时，它会触发一些性能很重的hover动作，比如在大box-shadow和/或动画border中褪色。由于显而易见的原因，我在移动浏览器上不需要这样做，而且我听说，仅仅是在移动设备的滚动轴上禁用悬停就可以带来很大的性能提升。
是否有一种方法可以轻松地，暂时禁用所有悬停效果时，在移动设备上滚动，只有？它是否安全(从UX的角度来看)，它是否值得实现(从性能的角度来看)？
浏览 6提问于2014-12-28得票数 3
回答已采纳
当你向下滚动页面时，我正在使用MagicScroll来为一些元素添加动画。我一直在网上搜索，找不到答案，但有没有办法只播放一次动画，这样如果他们向上滚动，然后再向下滚动，不会发生两次？
浏览 6提问于2014-04-06得票数 1
1回答
当我向下滚动到它的位置时，我试图让一个框变得动画，但动画不会停止，元素只是不断地重复动画。我使用的代码是：
jQuery(document).scroll(function (e) {
var value = jQuery(this).scrollTop();
if (value = 600) {
jQuery( "body" ).addClass( "scroll" );
jQuery('#car1').animate({top: '+=50px'}, 2000);
}
浏览 0提问于2014-02-18得票数 1
基本上，我有一个具有给定宽度和高度的元素。当我向它添加“缩放”类时，我希望它改变它的大小和位置。我让它工作与适当的webkit-动画(关键帧)。
问题是，当我删除“缩放”类时，它突然恢复到原来的大小和位置，我喜欢用动画来做这件事。
请注意，这是一个可能可以通过使用transition属性解决的示例，但在我的现实世界中，它不能，因为我有一个相当复杂的关键帧动画。
那么，如何拥有一个基本状态，在添加一个类时动画到一个新的状态，并在删除类时将动画反转到基本状态？谢谢。
浏览 1提问于2013-03-24得票数 0
回答已采纳
在一个涉及Turbolinks的Rails遗留项目中，我遇到了一个非常有趣的bug。下面是对这个bug的描述：
每当用户点击汉堡包导航图标时，侧导航就会动画化，打开导航链接列表以单击。单击此图标后，jQuery将向页面上的html元素添加一个类。每当用户单击其中一个导航链接时，Turbolinks就会执行Turbolinks的操作:向服务器发出XHR请求，以获取页面所需的HTML，并将页面的body标记替换为响应中的body标记。然而，当Turbolinks从服务器用新的body标记绘制页面时，访问者无法向下滚动页面--页面显示为冻结。
当我删除在单击导航时将CSS类添加到html元素的htm
浏览 1提问于2018-09-14得票数 1
回答已采纳
1回答
从某些ID中排除滚动动画功能
、、、、
我确实添加了JavaScript代码，用一个ID在每个块上添加了带有菜单的滚动动画，然后我添加了Bootstrap的选项卡，这些选项卡由于我的动画滚动而搞砸了。
我想知道如何使我的滚动动画停止工作在引导选项卡？
滚动动画代码
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && locatio
浏览 5提问于2014-11-28得票数 2
在链接中：
据说：
注意:如果转换被中止，则transitionend事件不会触发，因为动画属性值在转换完成之前被更改。
因此，我继续使用Chrome和火狐在和上试用。
示例：(单击“小提琴”中的左框或右框)
$(".foo").click(function(evt) {
$(".foo").addClass("hide");
setTimeout(function() {
$(".foo").eq(0).removeClass("hide");
}, 3000)
浏览 0提问于2013-07-30得票数 1
2回答
可以手动将NG动画添加到元素中吗？
例如，当添加或删除一个ng-class时，我想添加ng-enter和ng-leave。但我还需要ng-enter-active和ng-leave-active类，让我能够更好地控制动画过程。
浏览 1提问于2015-06-27得票数 7
2回答
我在CSS中创建了一个关键帧动画，但我希望能够切换它。 我尝试使用JS classList.toggle切换它，就像我对过渡动画所做的那样，但它只是简单地删除了类，而没有对其进行动画处理。 我找到的唯一解决方案是创建两个关键帧动画，一个用于"in“，另一个用于"out”。我想知道有没有更简单的方法来切换它？ 小提琴：https://jsfiddle.net/ViniciusBortoletto/q13un4go/1/ HTML <div class="button">Animate</div>
<div class="bo
浏览 29提问于2019-10-18得票数 1
2回答
稍后加载的FadeIn屏幕外元素
、、、、
我不想在向下滚动的时候褪色。此外，它还可以通过单击按钮添加更多的元素。问题是，一旦附加的元素在屏幕外，它们就不会被动画化，甚至不会显示。
它是以wow.js作为scrollReveal.js和其他任何形式出现的，因此它似乎是一个普遍的问题，但我不知道为什么会发生这种情况。
在这里
所以你看到了确切的问题。
只需按几次，添加按钮。
编辑
因此，问题在于，我使用滚动条插件将多个div容器嵌套到彼此的和中。不管是谁--每个人都会产生这个问题。我已经通过更改scrollReveal.js -第78行中的一行来解决这个问题：
viewport: window.document.documentEl
浏览 4提问于2014-12-28得票数 0
回答已采纳
2回答
将图像或组件从屏幕的另一边带到屏幕上，通过一个变体进入屏幕，如
const containerVariants = {
hidden: {opacity : 0, x: '-100vw'},
visible: {opacity : 1, x : 0}
}
在初始隐藏和动画是可见的地方，将导致滚动条出现。我没有看到滚动条出现在我看的教程上，知道为什么会出现这种情况吗?或者如何防止滚动条的出现？这似乎违反了直觉，滚动条会出现在框架运动期间，作为我如何可以滑动对象到视图。
浏览 9提问于2022-07-07得票数 1
1回答
滚动时标题上的淡入淡出徽标
、、、、
我几乎完成了我想要做的事情，但出现了一个小故障，我想知道是否有人能看到哪里出了问题。当我第一次打开页面时，CSS动画闪烁。
我正在尝试在我的乐队网站上设置徽标和横幅的动画
我希望它在菜单上的小徽标(".logo")一次滚动过去的标题横幅(".slides")和淡出与滚动回来。标题横幅也一样，但反之亦然。
下面是我的javacript代码。
jQuery(document).on("scroll", function(){
if
(jQuery(document).scrollTop() > 200){
jQuery(
浏览 0提问于2017-04-14得票数 0
我正在用ScrollMagic和GreenSock的TimelineMax做动画。动画应该放在WordPress页面中。但是当页面在Chrome中打开时，动画有一些小问题。这个问题在Safari和火狐中没有发生。我不能测试IE。
问题是这样的：
这就是我们应该看到的样子：
最底层的部分，标题你的网站上升，而顶部的两个部分向下移动。就像我说的，它在Safari和Firefox上运行得很好，但是在Chrome上，你必须上下滚动才能解决这个问题。然而，这是我们不能接受的，因为我们页面的用户在第一次向下滚动时不会正确地看到动画。
是动画的JSFiddle。现在，这很可能在JSFiddle中
浏览 3提问于2016-06-15得票数 0
3回答
我是Jquery的新手。我希望我的Wow.js动画可以运行不止一次。例如:我滚动到我页面的底部，看到所有的动画，如果我滚动回到顶部，我会再次看到动画，就像你向下滚动一样。我希望我已经解释清楚了。我已经看到许多网站在他们的页面上重复动画，但不幸的是，我不记得他们，我不能提供一个链接。
我已经尝试过了：
$(window).scroll(function(){
new WOW().init();
}
但如果你稍微滚动一下，它也会重复动画，而且看起来很难看。我试着更好地解释:我有一个我的动画，如果它是焦点，动画被触发，然后我向下滚动到另一个div，前一个div不再可见(不在窗口视口中)，然后
浏览 0提问于2015-10-17得票数 6
回答已采纳
在给你一点建议之后。我正在做我的公文包，我正在使用css过渡来动画元素与一些联系信息，这成为活动时，用户滚动。
在这个元素中有一个叫做'.top-bar-avatar‘的figure类元素，我还添加了一个工具提示和弹跳动画。这是所有的工作，但我想要实现的是工具提示自动显示和动画时，在网络浏览器中显示的图形。
超文本标记语言<li><figure class="top-bar-avatar"><img src="img/nick_avatar.png" alt="Top Bar Avatar Image Of Nick
浏览 15提问于2017-02-15得票数 0
回答已采纳
我肯定我在这里错过了一些简单的东西，但我无法用我的生命来解决它。我有一个小CSS动画，我想开始在页面加载，每当用户滚动到页面的顶部(或点击导航链接，把他们带到顶部)。如果我完全使用CSS，它将只工作一次，在页面加载。所以我想对jQuery做的是：
检查页面滚动是否小于50 if。
然后删除具有动画的类。
最后，重新应用类，再次启动动画。
我的JS代码如下所示：
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() < 50) {
浏览 6提问于2016-04-13得票数 3
回答已采纳
3回答
我在我的登录页面中使用和。我想动画元素时，用户滚动页面。但是，问题是我需要在动画开始之前隐藏元素(如果我不隐藏，animate.css会先隐藏元素，然后再动画，这看起来很丑陋)。
然而，我通过在css中添加两个类来解决问题，但这又产生了另一个问题。
.visible{ opacity: 1; }
.invisible {opacity: 0; }
// I added following jquery code
$('elem').removeClass('invisible').addClass('visible fadeInUp');
在我
浏览 3提问于2014-05-17得票数 12
回答已采纳
2回答
我有一个在设置滚动量后修复到页面顶部的标题，并希望在标题固定时对标题中的多个元素执行一组CSS转换：
标头高度从100 to缩小到60 to。
标题图标从50x50缩小到25x25。
标题字体从48 to缩小到36 to。
#1按预期工作，但当滚动目标被击中时，#2和#3会立即改变，而不是动画大小。
我正在添加/删除一个类.page-header-fixed来修复/取消修复头。
我在所有情况下都适用以下过渡：
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all
浏览 3提问于2014-08-20得票数 1
寻找角度动画滚动div顶部和底部的鼠标以上，鼠标，我们应该清除滚动。
完全类似的动画。
function scrollDiv(divId, depl) {
var scroll_container = document.getElementById(divId);
scroll_container.scrollTop -= depl;
timer1 = setTimeout('scrollDiv("'+divId+'", '+depl+')', 30);
}
这是Java脚本代码。但我在找角码。
浏览 1提问于2019-01-05得票数 0
回答已采纳
在这方面已经存在一些问题(非Svelte特定的.)，通常提出的解决方案是，首先设置动画类和事件处理程序，然后在动画结束时删除元素，而不是直接删除元素。
在Svelte中，元素的创建和删除是由{#if}或{#each}块“自动”处理的。
在创建/销毁时，有"build in“来动画元素。
转换是由由于状态更改而进入或离开DOM的元素触发的。
当检查带有转换集的元素时，可以看到Svelte创建了一个动画，该动画在元素最终被移除之前播放。
有一个选项可以编写一个，然后创建一个动画
如果返回的对象具有css函数，Svelte将创建一个在元素上播放的CSS动画。
主要
浏览 1提问于2022-04-02得票数 0
1回答
滚动功能上的动画在桌面视图上运行良好，但当我切换到移动视图并使用触摸滚动屏幕时，它会破坏滚动和滚动到随机部分。这是我在滚动功能上的动画：
$(window).scroll(function() {
$('.skillbar').each(function(i){
if($(window).scrollTop() + $(window).height() > $(this).offset().top ){
jQuery(this).find('.skillbar-bar').animate({
width:
浏览 2提问于2017-02-28得票数 1
回答已采纳
1回答
我做过这件事，但似乎一路上搞砸了。
我正在使用卷轴，它将使用户每次滚动到一个新的节/卡。
每次用户滚动到新的区段/卡片时，它都会添加一个可见类。
我使用这个作为基本的
<section class="cd-section visible">
<div>
<h2>Page Scroll Effects</h2>
</div>
</section>
然后，当用户滚动到一个新的部分时，它会删除并将可见的内容添加到下一节。
我正在动画的基本内容，如英雄文本等，为每一节。
<section cl
浏览 0提问于2018-09-09得票数 0
回答已采纳
ListView滚动动画使整个滚动像地狱般的缓慢在我的电脑。
如何禁用ListView滚动动画(平滑滚动)？
浏览 14提问于2011-12-10得票数 1
我的文档中有一个元素，它具有通过常规CSS规则设置的背景色和图像。
当某个事件发生时，我想要将该项目设置为动画，并突出显示它(我使用的是脚本，但这个问题适用于将执行相同操作的任何框架)。
new Effect.Highlight(elHighlight, { startcolor: '#ffff99', endcolor: '#ffffff', afterFinish: fnEndOfFadeOut });
我面临的问题是，动画完成后，元素的样式如下(根据FireBug)：
element.style {
background-color:transpare
浏览 2提问于2009-01-27得票数 0
回答已采纳
1回答
我创建了一个带有滚动触发器的CSS3动画，这是我在GSAP ScrollTrigger中需要的，因为AddEventListener('scroll'...与GSAP不兼容，因为它使用了不同的滚动机制。
这是我创建的当前动画：
这就是我在GSAP ScrollTrigger中试图做的，但没有奏效：
gsap.to('.glitch-slide', {
keyframes: {
"0%": { backgroundPosition: '0 0' },
"10%": { b
浏览 21提问于2022-08-12得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
