javascript - 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