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圖像來解決它:(