如何在加载网页时添加转换 [英] How to add transition when loading a web page
问题描述
是否可以像加载网页时一样添加转换功能，例如当您将鼠标悬停在具有转换效果的div上时。
示例：cubeupload.com
Is it possible to add transition like when loading a web page like when you hover a div with transition effect. example: cubeupload.com
推荐答案
你可以这样做，但不能只使用css3和html5开箱即用！即使不依赖较重的框架，你可以做的是应用于各种元素的onload事件，并在onload事件触发时附加一个css类！
You can do that, but not right out of the box using css3 and html5 only! what you can do, even without relying on heavier frameworks, is to apply to various element's onload events and append a css class when the onload events are firing!
让我们说你让你的身体的css看起来像这样：
lets say you make your body's css look like this :
body {
opacity : 0;
transition : opacity 1s ease;
}
.loaded {
opacity : 1;
}
然后你可以在javascript中做这样的事情：
you could then do something like this in javascript :
<body onload="this.classList.add('loaded')">
在某些浏览器中此 body元素中的变量未被真正识别，最好使用document.body！
in some browsers the this variable within the body element is not really recognized, it's better to use document.body instead!
<body onload="document.body.classList.add('loaded')">
这使您可以自由地在css中同时使用各种css属性，转换：所有1s轻松; 没有学习新框架的麻烦！
this gives you the freedom to play with various css properties all at once within css, transform : all 1s ease; without the hassle of learning new frameworks at all!
这是一个有效的例子
<!doctype>
<html>
<head>
<style>
body { background: orange; -webkit-transition: all 1s ease; transition: all 1s ease; }
.loaded { background: red; }
</style>
<script>function loaded (el) { el.classList.add('loaded') }</script>
</head>
<body onload="loaded(document.body)">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</body>
</html>
注意：根据要求，这是一个html5 / css3解决方案！旧浏览器可能不支持css 过渡或 classList 属性！
Notice : This is, as requested, a html5/css3 solution! older browser may not support css transitions or the classList property!
这篇关于如何在加载网页时添加转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
