使用CSS在页面加载时产生渐隐效果

CSS转换是否可以用于允许文本段落在页面加载时淡入?

我真的很喜欢它在http://dotmailapp.com/上的样子，并且喜欢使用CSS使用类似的效果。该域名已被购买，不再具有上述效果。存档副本可以查看在时光倒流机上。

插图

有这样的标记:

<div id="test">
<p>​This is a test</p>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

使用下面的CSS规则:

#test p {
opacity: 0;
margin-top: 25px;
font-size: 21px;
text-align: center;
-webkit-transition: opacity 2s ease-in;
-moz-transition: opacity 2s ease-in;
-o-transition: opacity 2s ease-in;
-ms-transition: opacity 2s ease-in;
transition: opacity 2s ease-in;
}​

如何在负载上触发转换?

1495731 次浏览
小开
最佳答案

方法1:

如果你正在寻找一个自调用转换，那么你应该使用CSS  3动画。它们也不受支持，但这正是它们的用途。

CSS

#test p {
margin-top: 25px;
font-size: 21px;
text-align: center;


-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}


@keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}


/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}


/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}


/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}


/* Opera < 12.1 */
@-o-keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

演示

浏览器支持

所有现代浏览器和Internet Explorer 10(及以后版本):http://caniuse.com/#feat=css-animation


方法2:

或者，您可以使用jQuery(或纯JavaScript;参见第三个代码块)在加载时改变类:

jQuery

$("#test p").addClass("load");​

CSS

#test p {
opacity: 0;
font-size: 21px;
margin-top: 25px;
text-align: center;


-webkit-transition: opacity 2s ease-in;
-moz-transition: opacity 2s ease-in;
-ms-transition: opacity 2s ease-in;
-o-transition: opacity 2s ease-in;
transition: opacity 2s ease-in;
}


#test p.load {
opacity: 1;
}

简单的JavaScript(演示中没有)

document.getElementById("test").children[0].className += " load";

演示

浏览器支持

所有现代浏览器和Internet Explorer 10(及以后版本):http://caniuse.com/#feat=css-transitions


方法3:

或者，你可以使用.Mail使用的方法:

jQuery

$("#test p").delay(1000).animate({ opacity: 1 }, 700);​

CSS

#test p {
opacity: 0;
font-size: 21px;
margin-top: 25px;
text-align: center;
}

演示

浏览器支持

jQuery 1.倍:所有现代浏览器和Internet Explorer 6(及以后版本):http://jquery.com/browser-support/
jQuery 2。x:所有现代浏览器和Internet Explorer 9(及以后版本):http://jquery.com/browser-support/

此方法是最具交叉兼容性的，因为目标浏览器不需要支持CSS 3过渡或动画。

小开

作为对@ a.m.的回应。K的问题关于如何做过渡没有jQuery。我举了一个很简单的例子。如果我有时间再考虑一下，我可能会完全消除JavaScript代码:

<style>
body {
background-color: red;
transition: background-color 2s ease-in;
}
</style>


<script>
window.onload = function() {
document.body.style.backgroundColor = '#00f';
}
</script>


<body>
<p>test</p>
</body>
小开

你可以使用onload="" HTML属性并使用JavaScript来调整元素的不透明度样式。

保留您建议的CSS。编辑您的HTML代码:

<body onload="document.getElementById(test).style.opacity='1'">
<div id="test">
<p>​This is a test</p>
</div>
</body>

这也适用于在完成加载时淡入整个页面:

HTML:

<body onload="document.body.style.opacity='1'">
</body>

CSS:

body{
opacity: 0;
transition: opacity 2s;
-webkit-transition: opacity 2s; /* Safari */
}

查看W3Schools网站:转换和有关用JavaScript改变风格的文章。

小开

另一种方法是将JS的Web动画API与CSS结合使用。

例子

async function moveToPosition(el, durationInMs) {
return new Promise((resolve) => {
const animation = el.animate([{
opacity: '0'
},
{
transform: `translateY(${el.getBoundingClientRect().top}px)`
},
], {
duration: durationInMs,
easing: 'ease-in',
iterations: 1,
direction: 'normal',
fill: 'forwards',
delay: 0,
endDelay: 0
});
animation.onfinish = () => resolve();
});
}


async function fadeIn(el, durationInMs) {
return new Promise((resolve) => {
const animation = el.animate([{
opacity: '0'
},
{
opacity: '0.5',
offset: 0.5
},
{
opacity: '1',
offset: 1
}
], {
duration: durationInMs,
easing: 'linear',
iterations: 1,
direction: 'normal',
fill: 'forwards',
delay: 0,
endDelay: 0
});
animation.onfinish = () => resolve();
});
}


async function fadeInSections() {
for (const section of document.getElementsByTagName('section')) {
await fadeIn(section, 200);
}
}


window.addEventListener('load', async() => {
await moveToPosition(document.getElementById('headerContent'), 500);
await fadeInSections();
await fadeIn(document.getElementsByTagName('footer')[0], 200);
});


async function moveToPosition(el, durationInMs) {
return new Promise((resolve) => {
const animation = el.animate([{
opacity: '0'
},
{
transform: `translateY(${el.getBoundingClientRect().top}px)`
},
], {
duration: durationInMs,
easing: 'ease-in',
iterations: 1,
direction: 'normal',
fill: 'forwards',
delay: 0,
endDelay: 0
});
animation.onfinish = () => resolve();
});
}


async function fadeIn(el, durationInMs) {
return new Promise((resolve) => {
const animation = el.animate([{
opacity: '0'
},
{
opacity: '0.5',
offset: 0.5
},
{
opacity: '1',
offset: 1
}
], {
duration: durationInMs,
easing: 'linear',
iterations: 1,
direction: 'normal',
fill: 'forwards',
delay: 0,
endDelay: 0
});
animation.onfinish = () => resolve();
});
}


async function fadeInSections() {
for (const section of document.getElementsByTagName('section')) {
await fadeIn(section, 200);
}
}


window.addEventListener('load', async() => {
await moveToPosition(document.getElementById('headerContent'), 500);
await fadeInSections();
await fadeIn(document.getElementsByTagName('footer')[0], 200);
});
body,
html {
height: 100vh;
}


header {
height: 20%;
}


.text-center {
text-align: center;
}


.leading-none {
line-height: 1;
}


.leading-3 {
line-height: .75rem;
}


.leading-2 {
line-height: .25rem;
}


.bg-black {
background-color: rgba(0, 0, 0, 1);
}


.bg-gray-50 {
background-color: rgba(249, 250, 251, 1);
}


.pt-12 {
padding-top: 3rem;
}


.pt-2 {
padding-top: 0.5rem;
}


.text-lightGray {
color: lightGray;
}


.container {
display: flex;
/* or inline-flex */
justify-content: space-between;
}


.container section {
padding: 0.5rem;
}


.opacity-0 {
opacity: 0;
}
<!DOCTYPE html>
<html lang="en">


<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Web site created using create-snowpack-app" />
<link rel="stylesheet" type="text/css" href="./assets/syles/index.css" />
</head>


<body>
<header class="bg-gray-50">
<div id="headerContent">
<h1 class="text-center leading-none pt-2 leading-2">Hello</h1>
<p class="text-center leading-2"><i>Ipsum lipmsum emus tiris mism</i></p>
</div>
</header>
<div class="container">
<section class="opacity-0">
<h2 class="text-center"><i>ipsum 1</i></h2>
<p>Cras purus ante, dictum non ultricies eu, dapibus non tellus. Nam et ipsum nec nunc vestibulum efficitur nec nec magna. Proin sodales ex et finibus congue</p>
</section>
<section class="opacity-0">
<h2 class="text-center"><i>ipsum 2</i></h2>
<p>Cras purus ante, dictum non ultricies eu, dapibus non tellus. Nam et ipsum nec nunc vestibulum efficitur nec nec magna. Proin sodales ex et finibus congue</p>
</section>


<section class="opacity-0">
<h2 class="text-center"><i>ipsum 3</i></h2>
<p>Cras purus ante, dictum non ultricies eu, dapibus non tellus. Nam et ipsum nec nunc vestibulum efficitur nec nec magna. Proin sodales ex et finibus congue</p>
</section>
</div>
<footer class="opacity-0">
<h1 class="text-center leading-3 text-lightGray"><i>dictum non ultricies eu, dapibus non tellus</i></h1>
<p class="text-center leading-3"><i>Ipsum lipmsum emus tiris mism</i></p>
</footer>
</body>


</html>


提交答案