Question

因此，我设计了一个使用AJAX的网页，使其具有单页应用程序的时尚感，并且（非常粗略地）可以这样工作。

标记：

<a class="js-ajax-link" href="/new-page">New Page</a>
<div class="container js-container">
    ... content goes here ...
</div>

脚本：

const ajaxLink = document.querySelector('.js-ajax-link');
const container = document.querySelector('.js-container');

ajaxLink.addEventListener('click', (e) => {
    e.preventDefault();

    container.classList.add('container--out'); // animate old page out

    swapContent();
    // swapContent is an ajax request using the HREF of '.ajaxLink'
    // then swaps the innerHTML of '.js-container' with the
    // corresponding '.js-container' on the new page.

    container.classList.remove('container--out'); // animate new page in
});

样式：

.container{
    opacity: 1;
    transition: transform 1s, opacity 1s;
}
.container--out{
    transform: scale(2) blur(50%);
    opacity: 0;
}

现在，请记住，这是我的代码的过度简化版本，可以快速说明我正在做的事情，而不是确切的表示。我在这里做的很好，在Safari，Edge，Chrome中，甚至在三星互联网上也是如此。这里唯一奇怪的人是Firefox，我似乎无法确定问题。

从这段代码中，您可以点击任何启用ajax的链接来观看页面缩放，模糊和淡入淡出，然后新页面将反向回到帧中。这种情况在其他浏览器中如预期的那样发生，但在Firefox中，它最初冻结，犹豫只转换一个或两个样式，然后在过长时间内变为空白，然后最终捕获过渡的尾端或两个。它笨拙，丑陋，不和谐。有没有人知道为什么会发生这种情况，如果有的话，我该如何解决呢？是CSS，AJAX还是两者都有问题？

转型运行缓慢的Firefox AJAX

0 个答案: