chore: Use data attribute and CSS animations for entering transitions
This commit is contained in:
Florian Zia
Родитель
e774f146f1
Коммит
c76e41d2a0
|
|
@ -308,3 +308,19 @@ dialog button.close {
|
|||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
[data-enter-transition] {
|
||||
opacity: var(--section-animation-opacity, 1);
|
||||
transform: translateY(var(--section-animation-y, 0));
|
||||
}
|
||||
|
||||
[data-enter-transition='visible'] {
|
||||
animation: section-animation ease-out 350ms forwards;
|
||||
}
|
||||
|
||||
@keyframes section-animation {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -236,16 +236,3 @@
|
|||
.mobile .see-if-data-breach .button {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media screen and (prefers-reduced-motion: no-preference) {
|
||||
.section-transition {
|
||||
opacity: 0;
|
||||
transition: opacity 350ms ease-out, transform 350ms ease-out;
|
||||
transform: translateY(var(--padding-lg));
|
||||
}
|
||||
|
||||
.section-transition-entered {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -55,3 +55,10 @@
|
|||
--multiplier: 0.75;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (prefers-reduced-motion: no-preference) {
|
||||
:root {
|
||||
--section-animation-opacity: 0;
|
||||
--section-animation-y: var(--padding-lg);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
import './scroll-observer.js'
|
||||
import './resize-observer.js'
|
||||
import './section-observer.js'
|
||||
import './transition-observer.js'
|
||||
import './components/circle-chart.js'
|
||||
import './components/custom-select.js'
|
||||
import './components/toast-alert.js'
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
const classNameToObserve = 'section-transition'
|
||||
const classNameEntered = `${classNameToObserve}-entered`
|
||||
const queueIntervalDuration = 150
|
||||
|
||||
// percentage a section that has to be in view in order to appear
|
||||
|
|
@ -22,7 +20,7 @@ function handleShowSection () {
|
|||
}
|
||||
|
||||
const nextEntry = entryQueue.shift()
|
||||
nextEntry.target.classList.add(classNameEntered)
|
||||
nextEntry.target.dataset.enterTransition = 'visible'
|
||||
}
|
||||
|
||||
function setQueueInterval () {
|
||||
|
|
@ -32,7 +30,7 @@ function setQueueInterval () {
|
|||
function handleScroll (entries) {
|
||||
entries.forEach(entry => {
|
||||
const sectionElement = entry.target
|
||||
const hasEntered = sectionElement.classList.contains(classNameEntered)
|
||||
const hasEntered = sectionElement.getAttribute('data-enter-transition') === 'visible'
|
||||
|
||||
if (hasEntered) {
|
||||
return
|
||||
|
|
@ -66,11 +64,14 @@ if (!observers) {
|
|||
const mediaQuery = window.matchMedia('(prefers-reduced-motion: no-preference)')
|
||||
const allowMotion = mediaQuery && mediaQuery.matches
|
||||
|
||||
const sections = document.querySelectorAll('[data-enter-transition]')
|
||||
|
||||
// Handle the following edge case: A user has the Monitor landing page open
|
||||
// and is setting their preferences.
|
||||
const sections = document.getElementsByClassName(classNameToObserve)
|
||||
mediaQuery.addEventListener('change', () => {
|
||||
[...sections].forEach(section => section.classList.add(classNameEntered))
|
||||
[...sections].forEach(section => {
|
||||
section.dataset.enterTransition = 'visible'
|
||||
})
|
||||
})
|
||||
|
||||
if (allowMotion) {
|
||||
|
|
@ -42,6 +42,15 @@ const guestLayout = data => `
|
|||
<link rel='apple-touch-icon' href='/images/apple-touch-icon.webp' sizes='180x180'>
|
||||
|
||||
<script src='/js/index.js' type='module'></script>
|
||||
|
||||
<noscript>
|
||||
<style>
|
||||
:root {
|
||||
--section-animation-opacity: 1;
|
||||
--section-animation-y: 0;
|
||||
}
|
||||
</style>
|
||||
</noscript>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
|
|
|
|||
|
|
@ -5,14 +5,7 @@
|
|||
import { getMessage } from '../../utils/fluent.js'
|
||||
|
||||
export const landing = () => `
|
||||
<noscript>
|
||||
<style>
|
||||
.section-transition {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
</noscript>
|
||||
<section class='hero section-transition'>
|
||||
<section class='hero' data-enter-transition>
|
||||
<div>
|
||||
<h1>${getMessage('exposure-landing-hero-heading')}</h1>
|
||||
<p>${getMessage('exposure-landing-hero-lead')}</p>
|
||||
|
|
@ -40,7 +33,7 @@ export const landing = () => `
|
|||
<img srcset='images/landing-hero.webp 530w, images/landing-hero@2x.webp 1059w' width='530' height='406' alt=''>
|
||||
</figure>
|
||||
</section>
|
||||
<section class='why-use-monitor section-transition'>
|
||||
<section class='why-use-monitor' data-enter-transition>
|
||||
<h2>${getMessage('why-use-monitor')}</h2>
|
||||
<p>${getMessage('identifying-breaches')}</p>
|
||||
<ul>
|
||||
|
|
@ -58,7 +51,7 @@ export const landing = () => `
|
|||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class='how-it-works section-transition'>
|
||||
<section class='how-it-works' data-enter-transition>
|
||||
<h2>${getMessage('how-it-works')}</h2>
|
||||
<ol>
|
||||
<li>
|
||||
|
|
@ -78,7 +71,7 @@ export const landing = () => `
|
|||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
<section class='safe-with-us section-transition'>
|
||||
<section class='safe-with-us' data-enter-transition>
|
||||
<div>
|
||||
<h2>${getMessage('safe-with-us')}</h2>
|
||||
<p>${getMessage('parent-company')}</p>
|
||||
|
|
@ -89,7 +82,7 @@ export const landing = () => `
|
|||
<img srcset='images/landing-nature-phone.webp 539w, images/landing-nature-phone@2x.webp 1078w' width='539' height='503' loading='lazy' alt=''>
|
||||
</figure>
|
||||
</section>
|
||||
<section class='top-questions-about-monitor section-transition'>
|
||||
<section class='top-questions-about-monitor' data-enter-transition>
|
||||
<div>
|
||||
<h2>${getMessage('top-questions-about-monitor')}</h2>
|
||||
<a href='https://support.mozilla.org/kb/firefox-monitor-faq' target='_blank'>${getMessage('see-all-faq')}</a>
|
||||
|
|
@ -109,7 +102,7 @@ export const landing = () => `
|
|||
</details>
|
||||
</div>
|
||||
</section>
|
||||
<section class='see-if-data-breach section-transition'>
|
||||
<section class='see-if-data-breach' data-enter-transition>
|
||||
<h2>${getMessage('see-if-data-breach')}</h2>
|
||||
<a class='button primary' data-cta-id='landing-2' href='/user/breaches'>${getMessage('get-started')}</a>
|
||||
</section>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче