停止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个带有动画的环。

解决方法

如果没有JavaScript，我认为这是不可能的，但是，您可以将自己选择的库用于此类动画（例如this one），也可以实现自定义解决方案。

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

这对我有用，我改变了这个：

旧 CSS

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

新的 CSS

.preload {
  transition: none !important;
}

使用以下代码，效果很好，请查看结果link

在此CSS中添加了动画功能

.divname .is-visible {
    animation: progress 2s ease-out forwards;
}

和.divname以及其他常规CSS功能。因此javascript每次都会调用.is-visible CSS并启用动画。

// 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))
  );
}

html

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

问题描述

解决方法

相关问答