blocks|key|296546|text|在回答@A.M.K关于如何在没有jQuery的情况下进行转换的问题时。我拼凑了一个非常简单的例子。如果我有时间再仔细考虑一下，我也许能够完全消除JavaScript代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|296547|<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>|code-block|syntax|javascript|296548|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>In response to @A.M.K's question about how to do transitions without jQuery. A very simple example I threw together. If I had time to think this through some more, I might be able to eliminate the JavaScript code altogether:</p>

<pre><code>&lt;style&gt;
    body {
        background-color: red;
        transition: background-color 2s ease-in;
    }
&lt;/style&gt;

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

&lt;body&gt;
    &lt;p&gt;test&lt;/p&gt;
&lt;/body&gt;
</code></pre>


blocks|key|513023|text|期待2020年的Web+Animations。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|513024|​|513025|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);
});|code-block|syntax|javascript|513026|body,
html+{
++height:+100vh;
}

header+{
++height:+20%25;
}

.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;
}|513027|<!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>|513028|513029|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API^0|8|E|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|12|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|H|7|13|8|@]|9|@]|C|$I|J]]|$1|M|3|N|5|H|7|14|8|@]|9|@]|C|$I|J]]|$1|O|3|E|5|6|7|15|8|@]|9|@]|C|$]]|$1|P|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|Q|$R|$5|S|T|U|C|$V|W]]]]

<p>Looking forward to <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API" rel="nofollow noreferrer">Web Animations</a> in 2020.</p>
<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>async function moveToPosition(el, durationInMs) {
  return new Promise((resolve) =&gt; {
    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 = () =&gt; resolve();
  });
}

async function fadeIn(el, durationInMs) {
  return new Promise((resolve) =&gt; {
    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 = () =&gt; resolve();
  });
}

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

window.addEventListener('load', async() =&gt; {
  await moveToPosition(document.getElementById('headerContent'), 500);
  await fadeInSections();
  await fadeIn(document.getElementsByTagName('footer')[0], 200);
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

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

&lt;body&gt;
  &lt;header class="bg-gray-50"&gt;
    &lt;div id="headerContent"&gt;
      &lt;h1 class="text-center leading-none pt-2 leading-2"&gt;Hello&lt;/h1&gt;
      &lt;p class="text-center leading-2"&gt;&lt;i&gt;Ipsum lipmsum emus tiris mism&lt;/i&gt;&lt;/p&gt;
    &lt;/div&gt;
  &lt;/header&gt;
  &lt;div class="container"&gt;
    &lt;section class="opacity-0"&gt;
      &lt;h2 class="text-center"&gt;&lt;i&gt;ipsum 1&lt;/i&gt;&lt;/h2&gt;
      &lt;p&gt;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&lt;/p&gt;
    &lt;/section&gt;
    &lt;section class="opacity-0"&gt;
      &lt;h2 class="text-center"&gt;&lt;i&gt;ipsum 2&lt;/i&gt;&lt;/h2&gt;
      &lt;p&gt;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&lt;/p&gt;
    &lt;/section&gt;

    &lt;section class="opacity-0"&gt;
      &lt;h2 class="text-center"&gt;&lt;i&gt;ipsum 3&lt;/i&gt;&lt;/h2&gt;
      &lt;p&gt;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&lt;/p&gt;
    &lt;/section&gt;
  &lt;/div&gt;
  &lt;footer class="opacity-0"&gt;
    &lt;h1 class="text-center leading-3 text-lightGray"&gt;&lt;i&gt;dictum non ultricies eu, dapibus non tellus&lt;/i&gt;&lt;/h1&gt;
    &lt;p class="text-center leading-3"&gt;&lt;i&gt;Ipsum lipmsum emus tiris mism&lt;/i&gt;&lt;/p&gt;
  &lt;/footer&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>


<p>Can CSS transitions be used to allow a text paragraph to fade-in on page load?</p>

<p>I really like how it looked on <a href="http://web.archive.org/web/20120728071954/http://www.dotmailapp.com/" rel="noreferrer">http://dotmailapp.com/</a> and would love to use a similar effect using CSS. The domain has since been purchased and no longer has the effect mentioned. An archived copy can be viewed <a href="http://web.archive.org/web/20120728071954/http://www.dotmailapp.com/" rel="noreferrer">on the Wayback Machine</a>.</p>

<h3>Illustration</h3>

<p>Having this markup:</p>

<pre class="lang-html prettyprint-override"><code>&lt;div id="test"&gt;
    &lt;p&gt;​This is a test&lt;/p&gt;
&lt;/div&gt;​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
</code></pre>

<p>With the following CSS rule:</p>

<pre class="lang-css prettyprint-override"><code>#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;
}​
</code></pre>

<p>How can the transition be triggered on load?</p>


Using CSS for a fade-in effect on page load

jQuery

CSS过渡可以让文本段落在页面加载时淡入吗？我真的很喜欢它在上的样子，也喜欢用CSS来实现类似的效果。该域名已被购买，不再具有上述效果。可以通过查看存档副本。插图拥有这个标记：<div id="test">    <p>​This is a test</p></div>​​​​​​​​​​​​​​​​​​​​​​​​​...

问使用CSS实现页面加载时的淡入效果
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用CSS实现页面加载时的淡入效果EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用CSS实现页面加载时的淡入效果
EN