CODEWITHSUNDEEP
javascripthtmlcsstransitionstyling
ChrisWeigen
ChrisWeigen

Reputation: 69

CSS Page transition leaving a trail

So previously I had been figuring out how to specify which transition activates when a specific page is selected, I figured it out.

Now....I'm curious why there is a trailing section of the previous page when I transition out of my selected effect. Upon each click, you'll notice a trailing, fading section of the previous page:

Example: http://codepen.io/anon/pen/BzFjk

If you take a look at the original page then you'll see what I'm going for:

The goal: tympanus.net (go to Choose a transition > Rotate > Room)

There are many attributes such as the code below specifying the styling for rotateroomLeftOut and rotateRoomLeftIn...etc. But I've matched them exactly to the original code and it still doesn't look like.

    @-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); }
}

Upvotes: 1

Views: 411

Answers (3)

vbotio
vbotio

Reputation: 1674

I had the "same" problem months ago. CSS - <p> leaving a trail when sliding

Sadly I didnt find any good solution, i had to use a PNG image to solve it :(

Upvotes: 0

myfunkyside
myfunkyside

Reputation: 3950

I think I found it, the culprit: pt-page-ontop


In all your cases (54 to 57) this class was added (in JS) the the page that moves out...

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

...I don't know why this doesn't have the same effect on the tympanus-page, but if I change it to this...

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

...it works without the trail.
(You still see a veil of the out-page disappearing, but notice that's also the case on the tympanus-page, but there the transitions are just faster so you don't really see it).

Example: http://codepen.io/anon/pen/dxwuk

(BTW, your CodePen HTML had double html- and body-tags inside the body-tag, CodePen probably fixes that for you on rendering, but better check your code twice)

UPDATE

If you combine MathiasaurusRex' answer with this one, you will lose that last veil as well. Fiddle around with that to see what you like best..

Upvotes: 1

Mathias Rechtzigel
Mathias Rechtzigel

Reputation: 3604

There is an opacity in your keyframes which is causing the colors to "trail"

Removing the opacity from the keyframes seems to solve your problem:

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

Codepen

Upvotes: 1

Related Questions