Synchronize css3 transitions

Question

I read the next example

And I'm trying to create an example of switching pages with slide, when the current page slides left I wont that next slide with it (like scroller).

Here is my code:

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<link rel="stylesheet" type="text/css" href="css/animations.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<style>
    html{
        margin: 0;
        padding: 0;
        border: 0;
        width: 100%;
        height: 100%;
    }

    #wrapper{
         background-color: #000000;
         position: absolute;
         width: 100%;
         height: 100%;
         top: 0;
         left: 0;
    }

    .page{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        visibility: hidden;
        overflow: hidden;
        backface-visibility: hidden;
    }

    .current{
        visibility: visible;
        z-index: 1;
    }
</style>

<script>
    $(document).ready(function(){
        $("#p12").click(function(){

            $("#page1").addClass("pt-page-moveToLeft");
            //$("#page2").addClass("current");
            //$("#page2").addClass("pt-page-moveFromLeft");
            //$("#page1").removeClass("current");
        });
    });

    $(".page").on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', 
    function() {
        alert("finished");
    });
</script>

</head>

<body>
    <div id="wrapper">
        <div id="page1" class="page current" style="background-color: #FF9999;">
            <h1>page1</h1>
            <button id="p12">next</button>
        </div>      
        <div id="page2" class="page" style="background-color: #00ff00;">
            <h1>page2</h1>
        </div>
        <div id="page3" class="page" style="background-color: #0000ff;">
            <h1>page3</h1>
        </div>
    </div>
</body>
</html>

How can I synchronize the 2 transitions pt-page-moveToLeft and pt-page-moveFromLeft ?

Note: I found this but it's also doesn't work for me

EDIT:

See the jsFiddle

EDIT (2):

Sorry for my English, I meant that I wont to support features like go from page 1 to 3 without go through 2 or use other transitions.

If the two pages move the exact same way, wouldn't it be easier to have all the pages in a single div and animate that one alone? — Jonas Grumann, Jul 16 '13 at 07:41
It will be more complicated, I'm asking that to simplify the question. — NickF, Jul 16 '13 at 07:46

Jonas Grumann · Answer 1 · 2013-07-16T08:56:40.083

1

I'm not sure I understood the question.. does this help you any further? JsFiddle

$(document).ready(function(){
    $("#p12").click(function(){

        $("#page1").removeClass('current').addClass("is-left");

    });
});

$(".page").on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', 
    function() {
        $("#page2").addClass("current").removeClass('is-right');
    });

Also, please the next time create a fiddle and link to it in your question, so people don't have to copy/paste your code.

Here's how I would have done it

JsFiddle

edited Jul 16 '13 at 08:56

answered Jul 16 '13 at 07:55

Jonas Grumann

10,438
2
22
40

I need something like you did but to activate the current page and next page transition so I don't see the black background, like the transition in the link at the beginning of the question. I also added jsFiddle at the end of the question. – NickF Jul 16 '13 at 08:32
You can just move the code for the second animation right under the first one: http://jsfiddle.net/jonigiuro/jcXDf/3/ – Jonas Grumann Jul 16 '13 at 08:42

Stefan Surkamp · Accepted Answer · 2013-07-16T09:01:02.093

1

This is a simple example: http://jsfiddle.net/jcXDf/2/

It uses the following jQuery code:

$(document).ready(function(){
  $("button").click(function(){

  $("#page1").animate({"left": "-100%"}, "fast");
  $("#page2").animate({"left": "0"}, "fast");

  });
});

You can of course modify it to fit for multiple pages as well.

EDIT This extended example should fit your needs: http://jsfiddle.net/jcXDf/4/

edited Jul 16 '13 at 09:01

answered Jul 16 '13 at 08:41

Stefan Surkamp

972
1
16
31

It's looks very good, but what if I wan to go from page 1 to 3 or add other transitions? that's why I wont to use the CSS3 animations. – NickF Jul 16 '13 at 10:19

Synchronize css3 transitions

EDIT:

EDIT (2):

2 Answers2