[英]Bugged CSS animation in Firefox using Intersection Observer
I'm using Intersection Observer to add a class to specific elements as they enter the viewport.我正在使用 Intersection Observer 在特定元素进入视口时为它们添加一个类。 The class triggers a CSS animation.
该类触发 CSS 动画。
Specifically, I'm adding .swipe
to any .highlight
elements that enter the viewport.具体来说,我将
.swipe
添加到任何进入视口的.highlight
元素。
In Firefox only, the animation runs on time but gets cut about 20% short.仅在 Firefox 中,动画会按时运行,但会缩短约 20%。
<div class="description">
<p><span class="highlight">Travel companion app</span> that displays nearby restaurants, hotels...</p>
</div>
const observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('swipe') } }) }); document.querySelectorAll('.highlight').forEach((i) => { if (i) { observer.observe(i); } });
.highlight { color: black; background-color: white; padding-left: 5px; padding-right: 5px; } .swipe { position: relative; width: fit-content; } .swipe::after { display: block; content: ''; position: absolute; top: 0; left: 0; right: 100%; width: 0%; height: 100%; background-color: black; animation: swipe 1.5s ease-out 1s forwards; } .swipe--delay::after { background-color: black; animation-delay: 1.5s; } .swipe h1 { color: black; opacity: 0; animation: fade 0.01s ease-out 1.75s forwards; } .swipe h2, .swipe h3 { color: black; opacity: 0; animation: fade 0.01s ease-out 2.25s forwards; } @keyframes swipe { 0% { right: 100%; left: 0; width: 0%; } 50% { right: 0; left: 0; width: 100%; } 100% { right: 0; left: 100%; width: 0%; } }
The .description
div had a text-align: justify
property. .description
div 有一个text-align: justify
属性。 Firefox seems to calculate the width of justified inline elements differently than other browsers. Firefox 似乎以不同于其他浏览器的方式计算对齐的内联元素的宽度。 There may be another way to fix this, but for now I'm happy removing the
text-align: justify
property altogether.可能有另一种方法可以解决此问题,但现在我很高兴完全删除
text-align: justify
属性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.