jube-fork/Jube.App/wwwroot/kendo/examples/application/transitions.html

<div data-role="view" data-title="Camera App" id="view-transitions" data-persist="true" data-use-native-scrolling="true">
    <h1 class="app-logo">Kendo UI<br /> Application</h1>
    <div class="action-buttons">
        <a href="#view-transitions-login" class="km-justified km-primary" data-role="button" class="transitions-button">Login/Sign-up</a>
    </div>
    
</div>

<div data-role="view" data-title="Login/Sign-up" id="view-transitions-login" data-transition="overlay:up" data-persist="true" data-use-native-scrolling="true">
    <ul data-role="listview" data-style="inset">
        <li><label for="username">Username: <input type="text" id="username" /></label></li>
        <li><label for="password">Password: <input type="password" id="password" /></label></li>
    </ul>
    
    <div class="action-buttons">
        <a href="#view-transitions-welcome" data-transition="overlay:down reverse" data-role="button" class="km-primary km-justified transitions-button">Login</a><br />
        <a href="#view-transitions" data-transition="overlay:up reverse" data-role="button" class="km-justified transitions-cancel">Cancel</a>
    </div>
</div>

<div data-role="view" data-title="Welcome" id="view-transitions-welcome" data-persist="true" data-use-native-scrolling="true">
    <h1 class="app-logo">Welcome</h1>
    <div class="action-buttons">
        <a data-role="button" class="km-justified" href="#view-transitions" data-transition="slide:right" class="transitions-button">Sign out</a>
    </div>
</div>

<style type="text/css" media="screen">
h1.app-logo {
    margin: 3em 0;
    font-size: 3em;
    font-weight: 100;
    text-transform: uppercase;
    text-align: center;
    line-height: .9em;
}
.action-buttons {
    margin: 1em;
}
#view-transitions-login .km-back {
    display: none;
}
</style>