我正在开发一个单页面应用程序（SPA），用户可以从一个（虚拟）页面导航到另一个页面。我想添加一个平滑的过渡，当前页面向左滑动并淡出，而下一页滑动到屏幕上并淡入。
以下代码段是此示例的一个示例。在MacBook Pro（15英寸，2016年）的Chrome 58中，性能选项卡似乎显示出极为不同的结果。有时FPS为60，有时为30，有时为10，因为每帧的ms达到100以上（？！）。在这些长帧期间，我在自己的代码中看不到任何活动。
这里有什么问题？为什么这些动画不是如此顺畅？
document.body.addEventListener('click', function() {
if (window.animating) return;
window.animating = true;
var animator = document.getElementById('animator');
var content1 = document.querySelector('.content');
var content2 = document.createElement('div');
content2.classList.add('content');
content2.innerHTML = content1.innerHTML;
content2.style.transform = 'translateX(100%)';
content2.style.opacity = 0;
animator.insertBefore(content2, content1);
requestAnimationFrame(function() {
requestAnimationFrame(function() {
var onAnimationEnd = function() {
if (content1.parentNode) content1.parentNode.removeChild(content1);
content2.style.transform = '';
animator.style.animationName = "";
animator.removeEventListener('animationend', onAnimationEnd)
window.animating = false;
}
animator.style.animationName = 'slide';
animator.addEventListener('animationend', onAnimationEnd);
content1.style.opacity = 0;
content2.style.opacity = 1;
})
})
})body {
max-width: 680px;
}
#animator {
position: relative;
transform: translateX(0);
animation-duration: 1s
}
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
.content {
position: absolute;
/* so containers can overlap */
width: calc(100% - 16px);
max-width: 680px;
padding: 0 8px;
transition-property: opacity;
transition-duration: 1s;
}<div id=animator>
<div class=content>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in semper felis, sit amet bibendum turpis. In enim urna, euismod eget malesuada vel, tristique at ligula. Quisque faucibus vulputate ex in egestas. Vestibulum gravida varius ullamcorper.
Sed scelerisque nisl dolor, at feugiat tellus porta a. Duis maximus lorem a laoreet pulvinar. Donec felis augue, dapibus ut molestie id, vehicula et tortor. Curabitur vitae tempor massa, eu dapibus magna. Donec facilisis sed purus eget aliquam.
Curabitur at velit erat. Proin vitae nisl eu odio facilisis pretium in sit amet urna. Aenean imperdiet metus in bibendum fermentum. Nullam eu sollicitudin neque, sit amet aliquam dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
ac imperdiet nunc, nec convallis elit. In efficitur neque non ullamcorper rhoncus.</p>
<p>Mauris dictum enim eu consectetur interdum. Integer a sem ac eros tincidunt ultrices. Proin eget vehicula leo. Praesent condimentum tincidunt sollicitudin. Etiam congue, est ut tempor luctus, arcu justo eleifend neque, sed aliquet lacus est eget sapien.
Maecenas at felis ut nisl tempor placerat. Sed sed tortor ligula. Duis nec tempor nibh, ac tincidunt eros. Quisque enim lacus, elementum vitae lorem sed, efficitur scelerisque magna. Vestibulum quis tellus sit amet neque facilisis tempus. Sed eu
vulputate felis, quis fringilla neque. Ut interdum congue velit ut cursus.</p>
<p>Cras volutpat erat magna, vitae molestie urna eleifend non. Ut volutpat nulla id ornare dictum. Sed quis eleifend dui. Fusce sed purus nulla. Curabitur varius eros quis nibh consequat feugiat. Nulla nec metus sapien. Praesent laoreet tempor dui. Maecenas
eleifend in mauris vitae convallis. Nam lobortis sagittis augue, non porttitor ipsum tempus et. Curabitur eleifend leo non tellus posuere aliquam a eu tellus. Donec augue nisi, aliquet ut egestas quis, interdum in turpis. Mauris efficitur enim ut
cursus tincidunt. Suspendisse ac lobortis est. Phasellus eget congue dui.</p>
<p>Etiam a ullamcorper enim. Aenean facilisis nec lectus ac auctor. Mauris id purus porta, elementum arcu et, fringilla ante. Sed a imperdiet tortor. In eu mauris sagittis, porta felis ac, scelerisque orci. Suspendisse vel iaculis tortor. Nulla ut metus
odio.</p>
<p>Fusce blandit aliquet purus quis tristique. Suspendisse ac egestas velit. Phasellus eget aliquet dolor. Suspendisse sodales eget nibh quis sagittis. Suspendisse id eros ut neque luctus vehicula quis non arcu. Vivamus vel porta enim, auctor accumsan
ligula. Praesent varius quis sapien at euismod. In bibendum sem nec viverra molestie. Suspendisse accumsan ornare nulla venenatis imperdiet. Curabitur in justo nec arcu sagittis ultrices eget eget mi. Donec dapibus mauris in orci facilisis pellentesque
porta ac ipsum. Nulla ornare, augue eget congue scelerisque, ante dui venenatis est, ac pellentesque lacus dui quis augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque ac semper urna. Donec consequat ultrices quam non
pellentesque. Integer tellus nibh, varius eget sollicitudin nec, accumsan id massa.</p>
<p>Ut at condimentum nulla. Praesent consectetur semper eros eget pretium. In sapien diam, feugiat quis est a, consequat blandit sem. Fusce augue mi, maximus id ipsum vitae, tempor gravida mauris. Nunc eget velit quam. Sed eget lectus vitae felis porttitor
sagittis. Sed faucibus, diam euismod congue condimentum, turpis tellus viverra nunc, quis cursus justo felis et magna. Etiam aliquet arcu quam, eget vehicula turpis suscipit nec. Nullam fermentum fringilla risus a scelerisque.</p>
<p>Phasellus non tortor ut velit commodo accumsan in eget ipsum. Ut sit amet volutpat massa. Mauris viverra sit amet ex vel pulvinar. Nullam tortor nulla, dictum a aliquet sed, tincidunt id enim. Curabitur hendrerit egestas quam, sed mattis purus. In
varius nec massa nec finibus. Suspendisse magna turpis, fringilla nec justo ut, fermentum feugiat felis. Nulla diam dolor, ultricies in neque et, faucibus suscipit metus. Aliquam erat volutpat. Vestibulum ultrices nisi ac dui porttitor vulputate.</p>
<p>Vivamus lobortis, turpis sit amet efficitur semper, sapien sapien hendrerit quam, a cursus tellus lectus quis nisl. Curabitur vel massa vitae lectus vulputate tristique sed vitae odio. Nulla ut dapibus enim, ac pulvinar nunc. Sed consequat sed sem
a sagittis. Curabitur felis orci, semper eu auctor sit amet, gravida vel sem. Praesent pharetra orci ut imperdiet pretium. Ut non est sit amet nunc egestas gravida ut nec velit. Donec lorem leo, maximus ut tortor ac, molestie feugiat neque. Duis
imperdiet est eleifend lacus pretium, quis eleifend magna malesuada.</p>
<p>Integer pulvinar ante at lobortis scelerisque. Phasellus vel dapibus ex. Aenean id leo nec mi tincidunt dignissim. Morbi porttitor quis mauris eu ultrices. Vestibulum in nisl ac mauris dignissim tincidunt quis vel leo. Pellentesque laoreet sit amet
nibh ac porttitor. Maecenas mattis felis ac blandit aliquet. Donec ac commodo felis, eget ultricies turpis. Ut efficitur erat dolor, ut pulvinar leo sagittis eget. Donec eu sem eros. Nullam molestie dapibus velit vel sodales. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed tempor nec orci at tempor. Maecenas efficitur sagittis justo, ac placerat nulla iaculis ac. Sed convallis ac neque id fermentum. Curabitur euismod turpis vitae tristique faucibus.</p>
<p>Vestibulum leo arcu, tincidunt sit amet vulputate nec, rutrum eget nulla. Sed sapien nisl, sagittis sit amet fermentum eget, volutpat tincidunt risus. Fusce ac luctus diam. Vestibulum at est egestas, fermentum erat ac, sodales enim. Nam eu facilisis
dui. Fusce quis ligula quis mi efficitur tristique rutrum a ante. Maecenas id congue sapien, in vulputate mi. Nam imperdiet venenatis leo. Proin pharetra vehicula est quis rutrum. Donec est eros, dapibus quis vulputate id, maximus et justo. Ut nec
mi elementum, aliquet dui ac, tempor ipsum.</p>
</div>
</div>