Javascript CSS页面转换留下痕迹

因此，之前我一直在想如何指定在选择特定页面时激活哪个转换，我已经想好了

现在…我很好奇，为什么在我转换出所选效果时，上一页会有一个尾随部分。每次单击后，您都会注意到上一页的尾随淡出部分：

示例：

如果你看一下原始页面，你就会知道我想要什么：

目标：（选择过渡>旋转>房间）

---

有许多属性，例如下面指定rotateroomLeftOut和rotateRoomLeftIn的样式的代码……等等。但我已经将它们与原始代码完全匹配，看起来仍然不一样

    @-webkit-keyframes rotateRoomLeftOut {

to { opacity: .9; -webkit-transform: translateX(-100%) rotateY(90deg); }
}
@-moz-keyframes rotateRoomLeftOut {
    to { opacity: .9; -moz-transform: translateX(-100%) rotateY(90deg); }
}
@keyframes rotateRoomLeftOut {
    to { opacity: .9; transform: translateX(-100%) rotateY(90deg); }
}

@-webkit-keyframes rotateRoomLeftIn {
  from { opacity: .3; -webkit-transform: translateX(100%) rotateY(-90deg); }
}
@-moz-keyframes rotateRoomLeftIn {
 from { opacity: .3; -moz-transform: translateX(100%) rotateY(-90deg); }
}
@keyframes rotateRoomLeftIn {
   from { opacity: .3; transform: translateX(100%) rotateY(-90deg); }
}

---

关键帧中存在不透明度，导致颜色“跟踪”

从关键帧中移除不透明度似乎可以解决您的问题：

@-moz-keyframes moveFromRight {
    from { -moz-transform: translateX(100%); }
}

---

我想我找到了，罪魁祸首：

pt page ontop

在您的所有案例（54到57）中，这个类被添加到（JS）移出的页面中

case 54:
    inClass = 'pt-page-rotateRoomLeftIn';
    outClass = 'pt-page-rotateRoomLeftOut pt-page-ontop';
    break;

…我不知道为什么这对…没有相同的效果，但是如果我把它改成这个

case 54:
    inClass = 'pt-page-rotateRoomLeftIn pt-page-ontop';
    outClass = 'pt-page-rotateRoomLeftOut';
    break;

…它在没有痕迹的情况下工作。
（您仍然可以看到外页的面纱消失了，但请注意，上页也是如此，但那里的转换速度更快，因此您无法真正看到它）

---

示例：

（顺便说一句，你的CodePen HTML在body标记中有两个HTML和body标记，CodePen可能会在渲染时为你修复这一点，但最好检查你的代码两次）

---

更新 如果你和这个结合，你也会失去最后的面纱。摆弄一下，看看你最喜欢什么。

几个月前我也有同样的问题。

---

遗憾的是，我没有找到任何好的解决方案，我不得不使用PNG图像来解决它：（

那么它应该是什么样子，你也有“原版”的例子吗？@myfunkyside Choose a transition>Rotate>Room抱歉，我在下面的评论中提到了我应该包括它。嗨，谢谢……不过我已经搞乱了，并且弄明白了。抱歉，应该提到。但是，即使没有不透明，也有st在主页内容确定后，我将提供一条线索。如果您查看原始页面并选择一个过渡>旋转>房间，那么您将看到我想要的是什么，它似乎仍然关闭。我将在正在过渡的页面上添加一条淡入黑暗的线索，但线索仍然是主要问题。@ChrisWeigen-如果这个答案有帮助的话你，你能接受它吗，如果不能，请留下一条评论为什么。这样，任何其他有同样问题的人都会知道这是否会解决他们的问题作为背景图像？