在页面加载时停止运行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的情况下阻止或触发页面加载时的动画/过渡效果，那就太好了。这是link的网站。当滚动大约25%时，有6个带有动画的环。
回答 3
Stack Overflow用户
发布于 2020-08-22 22:50:02
我不认为没有javascript是不可能的，然而，你可以为这样的动画使用你选择的库(比如this one，或者你可以实现一个自定义的解决方案。
对于自定义解决方案，您将使用Intersection Observer API来检测元素何时滚动到视图中，然后将动画类添加到该元素上。
Stack Overflow用户
发布于 2021-01-15 02:48:26
这对我很有效，我改变了这一点：
旧CSS
.preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
}新CSS
.preload {
transition: none !important;
}Stack Overflow用户
发布于 2020-08-23 00:04:32
使用以下代码，它可以很好地工作，请参见结果link
在此CSS中添加了动画功能
.divname .is-visible {
animation: progress 2s ease-out forwards;
}和.divname与其他正常的CSS功能。因此，javascript每次都调用.is-visible并启用动画。
// Detect request animation frame
var scroll = window.requestAnimationFrame ||
// IE Fallback
function(callback){ window.setTimeout(callback, 1000/60)};
var elementsToShow = document.querySelectorAll('.show-on-scroll');
function loop() {
elementsToShow.forEach(function (element) {
if (isElementInViewport(element)) {
element.classList.add('is-visible');
} else {
element.classList.remove('is-visible');
}
});
scroll(loop);
}
// Call the loop for the first time
loop();
// Helper function from: http://stackoverflow.com/a/7557433/274826
function isElementInViewport(el) {
// special bonus for those using jQuery
if (typeof jQuery === "function" && el instanceof jQuery) {
el = el[0];
}
var rect = el.getBoundingClientRect();
return (
(rect.top <= 0
&& rect.bottom >= 0)
||
(rect.bottom >= (window.innerHeight || document.documentElement.clientHeight) &&
rect.top <= (window.innerHeight || document.documentElement.clientHeight))
||
(rect.top >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight))
);
}https://stackoverflow.com/questions/63537419
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号