时间戳

首页 > 解决方案 > 停止 CSS 过渡在页面加载时运行

html - 停止 CSS 过渡在页面加载时运行

问题描述

编辑：添加了自己的答案并且有效。如果有人可以改进它，那就太好了！

有什么方法可以阻止 CSS 过渡在后台播放/运行？考虑页面底部有一个 CSS 动画，但它在页面加载后立即加载，但我们还没有滚动到页面底部。所以 CSS 动画从未见过！如果能够在没有 JavaScript 的情况下防止或触发页面加载时的动画/过渡，那就太好了。我不想在每次用户滚动页面或悬停时重复动画。动画应该等到用户滚动并且该部分在屏幕中可见。

我尝试了以下方法，但没有奏效！

HTML

<body class="preload">

CSS

.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

Javascript

$(window).load(function() {
  $("body").removeClass("preload");
});

如果能够在没有 JavaScript 的情况下防止或触发页面加载时的动画/过渡，那就太好了。这是网站链接。当滚动近 25% 时，有 6 个带动画的环。

标签： htmlcss

解决方案

我认为没有 javascript 是不可能的，但是，您可以为此类动画使用您选择的库（例如这个），或者您可以实现自定义解决方案。

对于自定义解决方案，您将用于Intersection Observer API检测元素何时滚动到视图中，然后将动画类添加到该元素上。

推荐阅读