CSS页面过渡留下痕迹

Question

因此，以前我一直在弄清楚如何指定在选择特定页面时激活哪个转换，我已经弄清楚了。

现在....我很好奇，当我从所选效果过渡出来时，为什么上一页会有尾部。 每次单击时，您会注意到上一页的尾随褪色部分：

示例： http ： //codepen.io/anon/pen/BzFjk

如果您看一下原始页面，那么您将看到我要做什么：

目标 ： tympanus.net （转到选择过渡>旋转>房间 ）

---

有很多属性，例如下面的代码，指定了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); }
}

Answer 1

关键帧中存在不透明性，导致颜色“拖尾”

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

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

Codepen

Answer 2

我想我找到了罪魁祸首： pt-page-ontop

在所有情况下（54至57），此类（在JS中）都添加到了移出的页面中...

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

...我不知道为什么这对tympanus-page没有相同的效果，但是如果我将其更改为...

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

...它可以正常工作。
（您仍然可以看到页面外层消失的面纱，但是请注意，在tympanus-page上也是如此 ，但是那里的转换速度更快，因此您看不到它）。

---

示例： http ： //codepen.io/anon/pen/dxwuk

（顺便说一句，您的CodePen HTML在body标签内有两个html和body标签，CodePen可能会在渲染时为您解决，但最好再检查一次代码）

---

UPDATE

如果将MathiasaurusRex的答案与此答案结合起来，您也会失去最后的面纱。 随便摆弄，看看自己最喜欢什么。

Answer 3

几个月前，我遇到了“相同”的问题。 CSS-<p>滑动时留下痕迹

可悲的是，我没有找到任何好的解决方案，我不得不使用PNG图像来解决它:(