Question

所以以前我一直在弄清楚如何指定在选择特定页面时激活哪个转换，我想出来了。

现在....我很好奇为什么当我转出我选择的效果时，上一页的尾随部分。每次点击，您都会注意到上一页的尾随淡出部分：

如果您查看原始页面，那么您将看到我的目标：

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

有许多属性，例如下面的代码，指定了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可能会在渲染时为您修复，但最好检查您的代码两次）

更新

如果你将MathiasaurusRex' answer与这个结合起来，你也将失去最后的面纱。摆弄它，看看你最喜欢什么..

Answer 3

几个月前我遇到了“同样”的问题。 CSS - <p> leaving a trail when sliding

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

CSS页面过渡留下痕迹

3 个答案:

更新