Using ui-router with view transitions

angularjs, javascript

Solution

Here is how I have been implementing simple view transitions between states.

HTML: States to Transition Between

<div class="row checkout-process">
<section class="col-sm-8 col-md-8 col-lg-8">
    <article class="shopping-cart" ui-view="shopping-cart" autoscroll="false"></article>
    <article class="order-confirmation" ui-view="order-confirmation" autoscroll="false"></article>
    <article class="thank-you" ui-view="thank-you" autoscroll="false"></article>
</section>

<section class="col-sm-4 col-md-4 col-lg-4">
    <kx-order-total></kx-order-total>
</section>

HTML: closed-state.html

<article class="col-sm-12 col-md-12 col-lg-12 next-state">
    <a ui-sref="{{state.name}}">
        <i class="fa fa-plus"></i> &nbsp;
        {{page.name}}
    </a>
</article>

CSS:

.shopping-cart[ui-view], .order-confirmation[ui-view], .thank-you[ui-view] {
  overflow: hidden;
}

.shopping-cart[ui-view].ng-enter, .order-confirmation[ui-view].ng-enter, .thank-you[ui-view].ng-enter {
  height: 0px;
  @include transition(height .35s ease-in-out);
  @include transition-delay(.35s);
}

.shopping-cart[ui-view].ng-enter-active, .order-confirmation[ui-view].ng-enter-active, .thank-you[ui-view].ng-enter-active {
  height: 200px;
}

.shopping-cart[ui-view].ng-leave, .order-confirmation[ui-view].ng-leave, .thank-you[ui-view].ng-leave {
  @include transition(all .35s ease-in-out);
  height: 200px;
}

.shopping-cart[ui-view].ng-leave-active, .order-confirmation[ui-view].ng-leave-active, .thank-you[ui-view].ng-leave-active {
  height: 0px;
}

Finally the relavent part of my states for transitioning.

            ////////////////////////
            //Order Checkout State//
            ////////////////////////

            .state('home.checkout', {
                url: 'checkout',
                views: {
                    '@home': {
                        templateUrl: 'views/partials/generic/checkout-process/order-checkout-root.html'
                    }
                }
            })

            .state('home.checkout.shoppingcart', {
                url: '^/shoppingcart',
                views: {
                    'shopping-cart@home.checkout': {
                        templateUrl: 'views/partials/generic/checkout-process/shoppingcart/shopping-cart-partial.html',
                        controller: 'ShoppingCartController'
                    },
                    'order-confirmation@home.checkout' : {
                        templateUrl: 'views/partials/generic/checkout-process/closed-state.html',
                        controller: function($scope) {
                            $scope.page = {name: 'Order Confirmation'};
                            $scope.state = {name: 'home.checkout.confirm'};
                        }
                    },
                    'thank-you@home.checkout' : {
                        templateUrl: 'views/partials/generic/checkout-process/closed-state.html',
                        controller: function($scope) {
                            $scope.page = {name: 'Order Completion'};
                            $scope.state = {name: 'home.checkout.thankyou'};
                        }
                    }
                }
            })

            .state('home.checkout.confirm', {
                url: '/confirmation',
                views: {
                    'shopping-cart@home.checkout': {
                        templateUrl: 'views/partials/generic/checkout-process/closed-state.html',
                        controller: function($scope) {
                            $scope.page = {name: 'Shopping Cart'};
                            $scope.state = {name: 'home.checkout.shoppingcart'};
                        }
                    },
                    'order-confirmation@home.checkout': {
                        templateUrl: '../views/partials/generic/checkout-process/confirmation/order-confirmation-partial.html',
                        controller: 'OrderConfirmationController'
                    },
                    'thank-you@home.checkout' : {
                        templateUrl: 'views/partials/generic/checkout-process/closed-state.html',
                        controller: function($scope) {
                            $scope.page = {name: 'Order Completion'};
                            $scope.state = {name: 'home.checkout.thankyou'};
                        }
                    }
                }
            })

            .state('home.checkout.thankyou', {
                url: '/thankyou',
                parent: 'home.checkout.confirm',
                views: {
                    'shopping-cart@home.checkout': {
                        templateUrl: 'views/partials/generic/checkout-process/closed-state.html',
                        controller: function($scope) {
                            $scope.page = {name: 'Shopping Cart'};
                            $scope.state = {name: 'home.checkout.shoppingcart'};
                        }
                    },
                    'order-confirmation@home.checkout' : {
                        templateUrl: 'views/partials/generic/checkout-process/closed-state.html',
                        controller: function($scope) {
                            $scope.page = {name: 'Order Confirmation'};
                            $scope.state = {name: 'home.checkout.confirm'};
                        }
                    },
                    'thank-you@home.checkout': {
                        templateUrl: '../views/partials/generic/checkout-process/thank-you/thank-you-partial.html',
                        controller: 'OrderConfirmationController'
                    }
                }
            });

This example is a bit more complex as I am transitioning between child states from the parent 'home.checkout'

If you want a great example to follow checkout the ui-router guys example. Its what got me going and a great simple way to learn it.

Problem

Original source